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内 容 简 介 


CSS 是 用 于 控制 网 页 样式 ， 并 人 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 语言 。 只 需 在 CSS 代码 中 做 
一 些 简单 的 修改 ， 就 可 以 改变 同一 页 面 中 的 不 同 部 分 ， 或 者 统一 网 站 页 面 的 外 观 和 格式 ， 例 如 颜色 、 边 框 、 背 
景 图 片 、 透 明度 和 大 小 等 。 

本 书 从 介绍 CSS 技术 的 基础 知识 开始 ， 围 绕 Web 设计 的 各 个 方面 予以 展开 ， 并 通过 大 量 实例 深入 剖析 CSS 
应 用 的 核心 。 本 书 分 20 章 ， 主 要 内 容 包括 CSS 选择 符 、CSS 伪 类 、 字 体 样 式 、 文 本 样式 、 区 块 样式 、 列 表 样 
式 、 表 格 和 表单 样式 以 及 特效 滤 镜 。 此 外 ， 还 对 CSS 在 页 面 布 局 、XML、JavaScript 以 及 Dreamweaver 中 的 应 
用 进行 了 介绍 。 最 后 使 用 div+CSS 制作 了 两 个 综合 实例 。 

本 书 适合 具有 一 定 XHTML 基础 ， 希 望 通过 CSS 提高 Web 设计 技能 的 读者 ， 同 时 也 适合 网 页 制作 初学 者 
学 习 ， 也 可 作为 相关 培训 机 构 的 参考 用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
图 书 在 版 编目 (CIP) 数 据 


CSS Web 开发 学 习 实录 / 张 芳 芳 ， 伐 俊杰 编著 . 一 北京 : 清华 大 学 出 版 社 ，2011.6 
(Web 程序 员 成 功 之 路 ) 
ISBN 978-7-302-25577-2 


I. Oc… I. @ 张 … @ 侯 *… ” 王 . @ 网 页 制作 工具 ,Css JIV. DTP393.092 
中 国 版 本 图 书馆 CIP 数据 核 字 (2011) 第 092729 号 


责任 编辑 : 张 ” 瑜 杨 作 梅 


装帧 设计 : 杨 玉 兰 

责任 校对 : 李 玉 萍 

责任 印 制 : 

出 版 发 行 : 清华 大 学 出 版 社 地 址 : 北京 清华 大 学 学 研 大 厦 A 座 
http://www.tup.com.cn 邮 编 : 100084 
社 总 机 : 010-62770175 邮 购 : 010-62786544 


投稿 与 读者 服务 : 010-62776969. c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015. zhiliang@tup.tsinghua.edu.cn 


印 刷 者 : 
装订 者: 
经 销 : 全 国 新 华 书店 
开 本: 190X260 印 张 : 35 字 数 : 853 千 字 
附 光盘 1 张 
版 ”次 : 2011 年 6 月 第 1 版 印 次 : 2011 年 6 月 第 1 次 印刷 
印 。” 数 : 1~4000 
定 ” 价 : 68.00 元 


产品 编号 : 


了 中 


前 


一 个 优秀 的 网 站 不 仅 需 要 具有 一 套 完整 的 内 容 结构 ,还 需要 巧妙 且 美 观 的 外 观 布局 及 合理 
的 内 容 搭配 。 此外， 网 站 的 页 面 设计 具有 统一 的 风格 同样 是 至 关 重要 的 ， 这 样 才能 增强 网 站 的 
吸引 力 ， 提 高 访问 量 ， 从 而 在 众多 的 网 站 中 脱颖而出 。 

CSS(Cascading Style Sheets， 层 痘 样式 表 ) 就 可 以 实现 这 种 功能 ， 使 用 CSS 可 以 有 效 地 对 页 
面 的 布局 、 字 体 、 闫 色 、 背 景 和 其 他 效果 实施 精确 的 控制 。 只 需 在 CSS 代码 中 做 一 些 简单 的 
修改 , 就 可 以 改变 同一 页 面 中 的 不 同 部 分 , 或 者 统一 网 站 页 面 的 外 观 和 格式 ,而 且 可 以 使 HTML 
文档 代码 更 加 简练 ， 文 档 结构 更 加 清晰 ， 并 能 有 效 地 缩短 浏览 器 的 加 载 时 间 。 

本 书 内 容 


第 1 章 CSS 快速 入 门 。 本 章 首先 介绍 CSS 的 概念 、 历 史 和 优点 ， 接 下 来 介绍 样式 表 的 
使 用 方法 、CSS 注释 、CSS 的 优先 级 和 单位 等 信息 ， 最 后 从 诸多 网 页 制作 工具 中 挑选 一 款 适 合 
自己 的 网 页 制作 工具 。 

第 2 章 ”选择 符 。 本 章 详细 讲解 每 种 CSS 选择 符 ， 像 通用 选择 符 、 标 签 选择 符 、ID 选择 

第 3 章 伪 类 和 伪 元 素 。 本 章 将 会 详细 讲解 每 个 CSS 伪 类 和 伪 元 素 的 用 法 ， 像 链接 伪 
类 、:focus、:first-child、:before 和 :after 等 。 

第 4 章 字体 属性 。 主 要 介绍 如 何 对 字体 设置 属性 ， 像 字体 颜色 、 字 体 大 小 、 字 体外 观 、 
字体 行 高 与 间隔 等 。 

第 5 章 文本 属性 。 主要 介绍 CSS 中 的 文本 属性 , 像 text-indent、 vertical-align、 white-space 
和 text-overflow 等 。 

第 6 章 边框 与 尺寸 属性 本章 详 细 介绍 设置 边框 和 边框 尺寸 的 各 种 属性 , 像 border、height 
和 width 等 。 

第 7 章 边 距 与 间隙 属性 。 主 要 介绍 如 何 控制 页 面 元 素 的 边 距 与 间隙 ， 包 括 margin 和 
padding 复合 属性 及 其 子 属性 。 

第 8 章 颜色 与 背景 属性 。 本 章 详细 介绍 各 个 CSS 背景 属性 ， 像 background、 
background-color 和 background-position 等 。 

第 9 章 列表 属性 。 主 要 对 构成 列表 的 符号 、 图 像 和 位 置 进 行 讲解 ， 像 list-style-type、 
list-style-image 和 list-style 等 。 

第 10 章 ”滚动 条 属性 。 本 章 详细 介绍 如 何 使 用 CSS 的 滚动 条 属性 ， 如 设置 亮 边 框 、3D 界 
面 边框 ， 设 置 箭头 颜色 和 拖 动 区 域 颜 色 等 。 

第 11 章 ， 统 揽 全 局 一 一 页 面 的 定位 与 布局 。 本 章 从 盒子 模型 的 概念 开始 ， 介 绍 如 何 对 元 
素 进行 定位 和 布局 的 设计 方法 。 

第 12 章 逐步 改善 页 面 的 表格 。 本 章 主要 介绍 与 表格 显示 布局 有 关 的 属性 ， 如 
border-collapse、border-spacing 和 caption-side 等 。 

第 13 章 ”逐步 改善 页 面 的 表单 。 本 章 介 绍 很 多 方法 来 增强 表单 可 用 性 ， 例 如 设置 访问 键 


和 强调 单 击 等 。 

第 14 章 ” 滤 镜 及 其 他 。 本章 详细 介绍 各 种 CSS 滤 镜 特效 , 同时 还 包含 如 何 设置 鼠标 指针 。 

第 15 章 使 用 Dreamweaver 提高 工作 效率 。 本 章 主要 介绍 如 何在 Dreamweaver 中 创建 、 
保存 、 修 改 和 编辑 CSS 以 提高 工作 效率 ， 同 时 还 对 Spry 框架 有 简单 的 介绍 。 

第 16 章 与 XML 整合 。 主 要 介绍 CSS 在 XML 中 的 应 用 ,例如 嵌入 CSS 和 实现 隔行 变 
色 等 。 

第 17 章 尽善尽美 一 一 合理 使 用 JavaScript。 本 章 将 CSS 与 JavaScript 结合 实现 各 种 页 面 
的 绚丽 效果 。 例 如 变换 表格 的 边框 颜色 、 随 着 鼠标 浮动 的 文字 、 会 闪 的 图 片 等 。 

第 18 章 CSS 跨 浏览 器 支持 技术 。 本 章 介绍 4 个 典型 的 CSS 兼容 性 问题 的 解决 办 法 。 然 
后 对 CSS Bug 的 问题 进行 了 讨论 ， 最 后 提供 了 一 些 有 关 CSS 兼容 性 的 建议 。 

第 19 章 itzcn 书店 设计 。 本 章 以 一 个 书店 为 话题 ， 详 细 讲 解 如 何 使 用 div+CSS 技术 实现 
各 个 栏目 ， 如 好 书 推荐 、 优 惠 图 书 和 图 书 分 类 等 。 

第 20 章 设计 微 博 首页 。 本 章 设计 了 一 个 时 尚 的 微 博 首页 ， 从 系统 分 析 、 结 构 分 析 、 设 
计 站 点 和 页 面 结 构 ， 再 到 各 个 栏目 的 实现 都 遵循 Web 标准 ， 同 时 包含 很 多 CSS 技巧 。 


本 书 特色 


本 书 中 大 量 内 容 均 来 自 真实 的 Web 网 站 ， 力 求 通过 解决 实际 操作 中 遇 到 的 问题 使 读者 能 
够 更 容易 地 掌握 CSS 的 页 面 设计 。 本 书 难度 适中 ， 内 容 由 浅 入 深 ， 实 用 性 强 ， 和 覆盖 面 广 ， 条 
理 清晰 。 

1) 结构 独特 

通过 “网 络 教学 一 基础 知识 一 实例 描述 一 实例 应 用 一 运行 结果 一 实例 分 析 ” 的 形式 ， 将 每 
个 知识 点 与 实际 应 用 中 的 问题 相 结 合 。 

2) 形式 新 颖 

用 准确 的 语言 总 结 概念 ， 用 直观 的 图 示 演 示 过 程 ， 用 详细 的 注释 解释 代码 ， 用 形象 的 比方 
帮助 记忆 。 

3) 技术 文档 

将 一 些 非 常 简单 的 知识 点 或 者 理论 性 的 内 容 安排 在 这 里 。 通常 这 些 文档 没有 具体 的 实际 问 

， 题 ， 但 又 是 读者 必须 要 了 解 的 ， 像 一 些 概念 和 术语 。 
4) 内 容 丰 富 

涵盖 了 实际 使 用 CSS 设计 时 所 遇 到 的 CSS 字体 、 文 本 、 区 块 、 控 制定 位 、 表 格 和 表单 样 
式 、 特 效 滤 镜 、XML 与 CSS 以 及 跨 浏 览 器 兼容 性 等 方面 的 热点 问题 。 

5) 随 书 光 盘 

本 书 为 实例 配备 了 视频 教学 文件 ， 读 者 可 以 通过 视频 文件 更 加 直观 地 学 习 CSS 的 使 用 
知识 。 

6) 网 站 技术 支持 

读者 在 学 习 或 者 工作 的 过 程 中 ， 如 果 遇 到 难以 解决 的 技术 问题 ， 可 以 直接 登录 网 站 
www.itzen.com 与 我 们 取得 联系 ， 作 者 会 在 第 一 时 间 内 给 予 帮助 。 

7) 贴心 的 提示 

为 了 便于 读者 阅读 ， 全 书 还 穿插 着 一 些 技 巧 、 提 示 等 小 贴 士 ， 体 例 约定 如 下 。 


mil >> 


提示 : 通常 是 一 些 贴心 的 提醒 ， 使 读者 能 够 加 深 记忆 或 提供 一 些 建议 以 及 解决 问题 的 方法 
注意 : 提出 学 习 过 程 中 需要 特别 注意 的 一 些 知识 点 和 内 容 ， 以 及 相关 的 信息 。 

技巧 : 通过 简短 的 文字 ， 指 出 在 应 用 知识 点 时 的 一 些小 窍门 。 

读者 对 象 


俐 
惠 


本 书 具 有 知识 全 面 、 实 例 精 彩 、 指 导 性 强 的 特点 ， 力 求 以 全 面 的 知识 性 及 丰富 的 实例 来 指 
导读 者 深入 地 学 习 CSS 各 方面 的 知识 。 既 可 作为 CSS 初学 者 的 入 门 教材 ， 也 适合 Web 开发 人 


员 进一步 学 习 和 作为 参考 。 
本 书 适 合 以 下 人 员 阅 读 学 习 : 
@ 。 Web 应 用 前 端 开发 者 
@ Web 应 用 前 端 设计 者 
@ ”网 站 开发 人 员 
@ ”网 页 制作 爱好 者 
@ 
® 


其 他 Web 前 台 从 业 人 员 
各 大 中 专 院 校 的 在 校 学 生 和 相关 授课 老师 


参 编 人 员 


本 书 主要 由 张 芳 芳 、 侯 俊杰 编写 ,其 他 参与 编写 、 资 料 整理 、 程 序 开发 的 人 员 还 有 张 浩 华 
段 韶 治 、 李 剑 龙 、 崔 群 法 、 林 田 田 、 王 伟 平 、 张 水 波 、 张 艳 梅 、 胡 海 静 等 。 
由 于 编者 水 平 有 限 ， 书 中 难免 存在 不 足 和 朴 漏 之 处 ， 奶 请 读者 批评 指正 。 
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第 1 章 CSS 快速 入 门 


内 容 摘 要 : 
CSS 是 Cascading Style Sheets 的 缩写 ， 其 中 文 意思 是 “ 层 有 登 样式 表 ”。 它 是 一 组 用 于 定义 
Web 页 面 外 观 格式 的 规则 。 
使 用 CSS 样式 设置 页 面 的 格式 ， 可 以 将 格式 控制 代码 单独 存放 ， 对 页 面 样式 进行 统一 管 
理 。 页 面 内 容 存放 在 HTML 文档 中 ,定义 表现 形式 的 CSS 规则 在 HTML 文档 的 头 部 或 另 一 个 
文件 中 声明 。 将 内 容 与 表现 形式 的 声明 相 分 离 ， 不 仅 可 以 增加 页 面 的 可 维护 性 ， 而 且 还 可 以 使 
HTML 文档 代码 更 加 简练 ，HTML 文档 结构 更 加 清晰 ， 而 且 能 有 效 地 缩短 浏览 器 的 加 载 时 间 。 
本 章 我 们 先 了 解 一 下 CSS 的 概念 、 历 史 和 优点 ， 并 熟练 掌握 CSS 样式 表 的 使 用 方法 以 及 
在 CSS 样式 表 中 添加 注释 的 方法 ， 然 后 了 解 一 下 CSS 的 优先 级 和 度量 单位 等 信息 ， 最 后 从 诸 
多 网 页 制作 工具 中 挑选 一 款 适 合 自己 的 网 页 制作 工具 。 
学 习 目标 : 
了 解 CSS 的 概念 、 历 史 和 优点 
掌握 几 种 使 用 CSS 样式 表 的 方法 
掌握 对 CSS 样式 表 添 加 注释 的 方法 
熟悉 CSS 的 优先 级 
掌握 CSS 中 的 度量 单位 的 用 法 
选择 一 个 开发 工具 


1.1 第 一 个 CSS 实例 


刚 接触 一 个 新 东西 ， 总 会 觉得 有 些 手 足 无 措 。 我 刚 学 CSS 的 时 候 也 是 这 样 ， 根 本 就 没有 
这 个 概念 ， 也 不 知道 从 什么 地 方 下 手 去 学 习 ， 更 不 知道 从 哪个 切入 点 去 理解 它 。 

作为 本 书 的 第 一 节 ， 我 们 就 来 详细 地 了 解 一 下 CSS 这 个 东西 ， 然 后 通过 一 个 实例 来 体会 
一 下 CSS 的 作用 。 


ce 视频 教学 : 光盘 /视频 /1/1.1 第 一 个 CSS 实例 .avi 人 @@ 长 度 : 9 分钟 


1.1.1 基础 知识 一 一 CSS 基础 


最 早 的 Web 服务 只 是 为 了 共享 信息 。 网 络 中 各 计算 机 之 间 在 互相 访问 时 接收 的 都 是 纯 文 
本 的 内 容 。 

但 是 随 着 需求 的 不 断 扩 大 ， 绚 丽 的 效果 也 一 点 点 地 加 入 到 Web 页 面 中 。 为 文本 设置 丰富 
多 彩 的 颜色 、 不 一 样 的 字体 和 字号 、 不 同样 式 的 线条 、 不 同位 置 不 同 大 小 的 图 片 、 不 同 的 模块 
各 式 各 样 的 背景 等 。 

CSS 自 诞生 以 来 ， 就 以 其 简单 的 语法 、 不 凡 的 效果 和 无 与 伦比 的 灵活 性 ， 为 Web 的 发 展 
做 出 了 不 可 磨灭 的 贡献 。 

1. CSS 基本 概念 


CSS 全 称 为 Cascading Style Sheet， 可 译 为 “ 层 县 样式 表 ” 或 “级 联 样式 表 ”， 通 常 称 之 为 
CSS 样式 或 样式 表 。CSS 是 一 些 纯 文本 内 容 ， 存 放 CSS 样式 表 内 容 的 文件 扩展 名 为 .css。 

CSS 是 一 种 描述 性 的 文本 ， 用 于 增强 或 者 控制 网 页 的 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 
相 分 离 。 

最 初 , HTML 标签 被 设计 为 定义 文档 结构 的 功能 ， 通过 使 用 像 <hl>、<p>、<table>、<img> 
等 之 类 的 标签 ， 分 别 在 浏览 器 中 展示 一 个 标题 、 一 个 段落 、 一 个 表格 、 一 个 图 片 等 内 容 。 

而 页 面 中 内 容 的 布局 ， 由 浏览 器 根据 标签 表示 的 内 容 以 从 上 到 下 、 从 左 到 右 的 “ 流 ” 式 布 
局 依次 排列 ， 如 果 想 要 对 内 容 进行 定位 ， 则 需要 使 用 表格 进行 分 栏 控制 。 

HTML 只 是 标识 页 面 结构 的 标记 语言 。 而 Web 发 展 初期 的 两 大 浏览 器 厂商 Netscape 和 
Internet Explorer 为 了 表现 更 加 丰富 的 页 面 效 果 ， 争 夺 Web 浏览 器 市 场 ， 不 断 地 添加 新 的 标记 
和 属性 到 HTML 规范 中 (比如 设置 文本 样式 的 font 元 素 )， 这 使 得 原本 结构 比较 清晰 的 HTML 


文档 变 得 非常 混乱 。 

而 且 随 着 Web 页 面 效 果 的 要 求 越 来 越 多 样 化 ， 依 赖 HTML 的 页 面 表现 已 经 不 能 满足 网 页 
开发 者 的 需求 。 

CSS 的 产生 ， 改 变 了 传统 的 HTML 页 面 的 样式 效果 。CSS 规范 代表 了 Web 发 展 史 上 一 个 
独特 的 阶段 。 

2. CSS 的 历史 


从 20 世纪 90 年 代 初 HTML 被 发 明 开 始 ， 样 式 就 以 各 种 形式 存在 。 不 同 的 浏览 器 结合 它 
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本 网 


们 各 自 的 样式 语言 为 用 户 提供 页 面 效 果 的 控制 。 最 初 的 HTML 只 含有 很 少 的 显示 属性 。 

为 了 满足 页 面 设计 者 的 要 求 ,HTML 逐渐 添加 了 很 多 显示 功能 。 但 是 随 着 这 些 功能 的 增加 ， 
HTML 变 得 越 来 越 杂 乱 ， 而 且 HTML 页 面 也 越 来 越 腔 肿 。 于 是 CSS 便 随 之 诞生 了 。 

1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 而 正巧 当时 伯 特 ， 波斯 (Bert Bos) 正 在 设计 一 个 
名 为 Argo 的 浏览 器 ， 于 是 他 们 决定 一 起 设计 CSS。 

其 实 当时 互联 网 界 已 经 有 过 一 些 统一 样式 表 语言 的 建议 了 ， 但 CSS 是 第 一 个 含有 “ 层 营 ” 
思想 的 样式 表 语 言 。 

在 CSS 中 ， 一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 下 来 。 读 者 在 有 些 地 方 可 以 使 用 
他 自己 更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 或 “ 层 倒 ”作者 的 样式 。 这 种 层 县 的 方式 使 作者 和 读 
者 都 可 以 灵活 地 加 入 自己 的 设计 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 提出 了 CSS 的 建议 , 1995 年 他 与 波斯 一 起 再 
次 提出 这 个 建议 。 那 时 候 刚 刚 建立 的 W3C 组 织 对 CSS 的 发 展 很 感 兴趣 ， 他 们 为 此 专门 组 织 了 
一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 是 这 个 项 目的 主要 技术 负责 人 。1996 年 底 CSS 初稿 已 
经 完成 。 同 年 12 月 CSS 规范 的 第 一 个 版 本 发 布 。 

1997 年 初 ，W3C 组 织 负责 CSS 的 工作 组 开始 讨论 第 一 版 中 未 涉及 的 问题 。 其 讨论 结果 组 
成 了 1998 年 5 月 发 布 的 CSS 规范 第 二 版 。 

从 2001 年 开始 ，CSS 3 提 上 研究 议程 。 但 至 今 为 止 ， 尚 未 有 一 个 完整 的 版 本 发 布 。 

CSS 3 提供 了 多 种 新 途径 去 改善 你 的 设计 工作 ， 且 做 了 不 少 重要 的 变化 ， 值 得 期 待 ! 


》 因为 现在 CSS 3 还 没有 正式 发 布 ， 所 以 本 书 讲解 的 所 有 知识 点 都 是 以 CSS 2 为 
注音 | 。 基础 的 。 


3. CSS 的 特点 

CSS 为 HTML 标记 语言 提供 了 一 种 样式 描述 ， 定 义 了 其 中 元 素 的 显示 方式 。CSS 在 Web 
设计 领域 是 一 个 突破 。 我 们 使 用 它 修 改 一 个 小 的 样式 便 可 更 新 与 之 相关 的 所 有 页 面 元 素 。 

总 体 来 说 ，CSS 具有 以 下 特点 。 

1) 丰富 的 样式 定义 

CSS 提供 了 丰富 的 文档 样式 外 观 ， 以 及 设置 文本 和 背景 属性 的 能 力 ; 使 用 CSS 可 以 为 任 
何 元 素 创建 边框 、 设 置 边框 与 其 他 元 素 间 的 距离 ， 以 及 元 素 边 框 与 元 素 内 容 间 的 距离 ; 还 可 以 
随意 改变 文本 的 大 小 写 方式 、 修 饰 方式 以 及 其 他 页 面 效 果 。 

2) 易于 使 用 和 修改 

CSS 可 以 将 样式 定义 在 HTML 元 素 的 style 属性 中 , 也 可 以 将 其 定义 在 HIML 文档 的 header 
部 分 ， 还 可 以 将 样式 声明 在 一 个 专门 的 CSS 文件 中 ， 供 HTML 页 面 引 用 。 总 之 ，CSS 样式 表 
可 以 将 所 有 的 样式 声明 统一 存放 ， 统 一 管理 。 

另外 ， 我 们 可 以 将 相同 样式 的 元 素 进行 归 类 ， 使 用 同一 个 样式 进行 定义 ; 也 可 以 将 某 个 样 
式 应 用 到 所 有 同名 的 HIML 标签 中 ; 也 可 以 将 一 个 CSS 样式 指定 到 某 个 页 面 元 素 中 。 

如 果 要 修改 样式 ， 我 们 只 需要 在 样式 列表 中 找到 相应 的 样式 声明 进行 修改 即 可 。 

3) 多 页 面 应 用 

CSS 样式 表 可 以 单独 存放 在 一 个 CSS 文件 中 ， 这 样 我 们 就 可 以 在 多 个 页 面 中 使 用 同一 个 
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CSS 样式 表 。CSS 样式 表 理 论 上 不 隶属 于 任何 页 面 文件 ， 在 任何 页 面 文件 中 都 可 以 将 其 引用 。 
这 样 就 可 以 实现 多 个 页 面 风格 的 统一 。 

4) 层 县 

简单 地 说 ， 层 又 就 是 对 一 个 元 素 多 次 设置 同一 个 样式 ， 这 将 使 用 最 后 一 次 设置 的 属性 值 。 

比如 我 们 对 一 个 站 点 中 的 多 个 页 面 使 用 了 同一 套 CSS 样式 表 ， 而 某 些 页 面 中 的 某 些 元 素 
想 使 用 其 他 样式 , 我 们 就 可 以 针对 这 些 样式 单独 定义 一 个 样式 表 应 用 到 页 面 中 。 这 些 后 来 定义 
的 样式 将 对 前 面 的 样式 设置 进行 重 写 ， 我 们 在 浏览 器 中 看 到 的 将 是 最 后 设置 的 样式 效果 。 

5) 页 面 压缩 

在 使 用 HTML 定义 页 面 的 网 站 中 ， 往 往 需要 大 量 或 重复 的 表格 和 font 元 素 形成 各 种 规格 
的 文字 样式 ， 这 样 做 的 后 果 就 是 会 产生 大 量 的 HTML 标签 ， 从 而 使 页 面 文件 的 大 小 增加 。 

而 将 样式 的 声明 单独 放 到 CSS 样式 表 中 ， 可 以 大 大 地 减 小 页 面 的 体积 ， 这 样 在 加 载 页 面 
时 使 用 的 时 间 也 会 大 大 地 减少 。 

另外 ，CSS 样式 表 的 复 用 更 大 程度 地 缩减 了 页 面 的 体积 ， 减 少 下 载 的 时 间 。 

4. 使 用 CSS 的 优势 


一 项 新 技术 的 发 展 壮 大 需要 其 有 许多 不 可 替代 、 不 可 超越 的 优点 ,才能 从 多 种 技术 中 脱 颖 
而 出 。 

CSS 做 到 了 这 一 点 ， 是 因为 它 有 以 下 优点 。 

1) Web 页 面 样式 与 结构 分 离 

HTML 并 不 用 来 控制 网 页 的 格式 及 外 观 ， 而 是 用 来 控制 页 面 的 结构 。 所 以 CSS 样式 表单 
独 存 放 使 Web 页 面 保持 样式 和 结构 相互 分 离 。 

2) 页 面 下 载 时 间 更 快 

CSS 可 以 重用 样式 ， 所 以 对 样式 进行 设置 的 代码 将 会 大 大 减少 。 另 外 ， 因 为 CSS 样式 表 
可 以 单独 存放 到 一 个 文件 中 , 而 像 正 之 类 的 浏览 器 的 缓存 功能 会 自动 判断 下 载 过 的 资源 文件 ， 
进行 重复 使 用 ， 缩 短 下 载 时 间 。 

3) 节省 开发 和 维护 的 成 本 

只 需 改动 很 少 的 几 个 CSS 文档 ， 就 能 够 轻松 控制 具有 上 千 页 容量 网 站 的 外 观 。 所 以 网 页 
开发 者 可 以 更 快 、 更 容易 地 维护 及 更 新 大 量 的 网 页 。 

4) 令 人 满意 的 版 面 样式 控制 

CSS 控制 排版 样式 功能 要 比 <table>、<font> 标 签 强 很 多 ， 因 此 网 页 设计 者 不 再 需要 使 用 
<font> 标 签 或 单独 的 图 片 创建 导 引 线 、 更 改 字体 颜色 、 字 体 大 小 及 种 类 等 。 

5) 轻松 创建 及 编辑 

创建 和 编辑 CSS 如 同 HIML 一 样 容 易 ， 利 用 简单 的 记事 本 就 可 以 完成 。 当 然 也 可 以 使 用 
像 Dreamweaver 一 样 的 IDE(Integrated Development Environment， 集 成 开发 环境 ) 来 辅助 开发 。 

6) 兼顾 打印 和 Web 页 面 设计 

CSS 样式 表 创 建 的 外 观 样式 能 够 同时 适应 浏览 器 、 打 印 等 环境 使 用 。 

7) 较 好 地 控制 元 素 在 Web 页 面 中 的 位 置 

CSS 的 定位 属性 允许 用 户 精确 地 定义 元 素 出 现 的 相对 位 置 , 相对 于 其 他 元 素 或 浏览 器 窗 体 
本 身 。 
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8) 有 利于 搜索 引擎 的 搜索 


使 用 CSS 样式 表 以 后 的 HTML 仅仅 被 用 来 创建 结构 ， 简 洁 的 页 面 对 搜索 引擎 的 友好 程度 


大 大 增加 ， 可 以 更 加 有 效 地 利于 搜索 引擎 收录 ， 所 以 网 页 被 搜索 到 的 几率 就 会 提高 。 


1.1.2 ”实例 描述 


以 div+CSS 为 主流 技术 的 Web 页 面 技术 现在 的 发 展 正 如 日 中 天 ， 与 table 相 比 ，div 具有 


加 载 速度 快 、 利 于 搜索 引擎 优化 的 特点 。 


本 实例 我 们 就 以 div+CSS 技术 设计 一 个 简单 的 个 人 网 站 页 面 。 


1.1.3 ”实例 应 用 


【 例 1-1】 第 一 个 CSS 实例 
(1) 在 硬盘 上 新 建 一 个 目录 ， 作 为 我 们 站 点 的 根 目录 。 
(2) 在 站 点 根 目录 中 创建 名 为 css 和 imgs 的 文件 夹 ， 用 于 存放 CSS 文件 和 图 像 资源 文件 。 
(3) 在 刚才 创建 的 imgs 文件 夹 中 存放 三 个 本 实例 要 用 到 的 图 像 文件 ， 分 别 是 banner.gif、 


container bg.gif 和 header bg.gif。 


(4) 在 站 点 根 目录 下 创建 一 个 文本 文件 ， 命 名 为 tortoise.html。 
(5) 用 记事 本 编辑 tortoise.html 文件 ， 添 加 内 容 ， 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/Xxhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title> 可 爱 的 小 乌龟 </title> 
<link rel="stylesheet" type="text/css" href="css/tortoise.css"/> 
</head> 
<body> 
<div id="container"> 
<div id="header line"> 
<div id="header"> 
<h1> 可 爱 的 小 乌龟 </h1> 
<ul> 
<li><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 我 的 日 记 </a></1i> 
<1i><a href="#"> 我 的 照片 </a></1i> 
<1i><a href="#"> 给 我 留言 </a></1i> 
</ul> 
</div> 
</div> 
<div id="body"> 
<div id="banner"> 


<div id="site discription"> 最 近 买 了 一 只 可 爱 的 小 乌龟 ! 开心 ! ! ! </div> 
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</div> 
<div id="main"> 
<div class="l0g"> 
<h3> 我 的 小 乌龟 </h3> 
<div class="content"> 
<p> 小 乌龟 身 穿 一 身 异 常 坚 固 的 sldauo; 铠 甲 &rdquoz， 伸 着 四 条 粗壮 的 腿 ， 威 风 凉 凉 ， 
活 像 一 个 &ldquo; 大 将 军 &rdquo; 。 可 这 位 &1dquo; 将军 &rdquo; 胆 子 特别 小 ， 一 旦 gl1dquo; 临 阵 
&rdquo; 就 成 了 名 副 其 实 的 缩 头 乌龟 了 。 如 果 有 个 人 影 在 它 前 面 晃 几 下 ， 它 也 会 吓 得 直 剩 下 龟 壳 
gmdash; gmdash; gmdash; 头 、 尾 、 四 上 肢 全 缩 了 进去 ， 过 了 好 一 会 ， 它 才 把 脑袋 偷偷 地 探 出 来 。 </p> 
</div> 
<div class="log descr">2010-8-3 17:54</div> 
</div> 
<div class="1og"> 
<h3> 小 乌龟 的 新 家 </h3> 
<div class="content"> 
<p> ”我 知道 小 乌龟 都 很 喜欢 阳光 ， 所 以 让 爸爸 给 它们 做 了 一 间 有 小 楼 梯 和 小 阳台 的 玻璃 
房子 。 看 爸爸 做 好 了 之 后 ， 我 就 急忙 把 小 乌龟 送 到 了 新 家 中 。</p> 
<p> ”起 先 ， 它 在 水 中 自由 自在 地 游泳 ， 好 像 要 游 遍 自己 新 房间 的 每 个 角落 。 游 累 了 ， 它 
便 停 下 脚步 ， 把 可 爱 的 头 抬 起 并 伸 出 水 面 ， 左 看 一 眼 ， 右 看 一 眼 ， 好 像 处 处 都 有 好 事 、 开 心事 在 等 着 它 。 
</p> 


</div> 
<div class="]log descr">2010-8-1 10:21</div> 
</div> 
</div> 
<div id="sidebar"> 
<h2> 站 点 搜索 </h2> 
<input /> 
<button type="submit"> 搜 索 </button> 
<h2> 自 我 介绍 </h2> 


<p> 我 叫 张 小 山 <br /> 
今年 11 岁 <br /> 
现在 上 小 学 五 年 级 <br /> 
我 喜欢 画 画 ， 也 喜欢 小 动物 </p> 
</div> 
</div> 
<div id="footer"> Copyright &copy; 2010 张 小 山 <a href="#"> 可 爱 的 小 乌龟 </a> 
</div> 
</div> 
</body> 
</html> 


(6) 在 刚才 创建 的 名 为 css 的 文件 夹 中 创建 一 个 文本 文件 ， 命 名 为 tortoise.css。 
(7) 用 记事 本 编辑 tortoise.css 文件 ， 添 加 如 下 内 容 : 


@charset "utf-8"; 


NE cas = 
html,body,div{ margin:0; padding:0; } 
body{ font-size:13px; font-family:" 宋 体 ", Arial; line-height:2lpx; } 
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/* -== #container -- */ 
#container{ background-color:#95BA46; padding-bottom:20px; 
background-image:url(../imgs/container bg.gif); background-position:bottom; 


background-repeat:repeat—-x; } 


/* -- #header -— */ 

#header line{ background-image:url(../imgs/header bg.gif); 
background-repeat:repeat-x; } 

#header{ height:59px; width:740px; margin:auto; } 

#header hl{ margin:0; color:#95BA46; font-size:30px; padding:20px 0 0 0; 
float:left; } 

#header ul{ list-style:inline; float:right; } 

#header ul 1i{ display:inline; } 

#header ul li af padding:17px Spx; color:#FFF; font-size:17px; 
text-decoration:none; } 

#header ul 1i a:hover,#header ul li a:active{ background-color:#5f6e42; } 


= od == 

#body{ background-color:#FFF; padding:1l5px; width:710px; margin:auto; } 
#body:after { content: "."; display: block; clear: both; height: 0; visibility: 
hidden } 

banner = 办 

#banner{ width:708px; height:182px; border:solid lpx #333; 
background-image:url(../imgs/banner.gif); } 

#site discription{ margin:70px 0 0 30px; font-size:14px;} 


J = a 

#main{ width:430px; float:left; padding-right:20px; } 
.1og h3{ border-bottom:solid lpx #95BA46; } 

.1og .log descr{ text-align:right; color:#888; } 


/idebar 一 一 <*/ 

#sidebar{ width:240px; float:right; padding-left:20px; } 

#sidebar h2{ border-bottom:solid lpx #95BA46; } 

/== $FEo0ter = 一 二 外 

#footer{ width:738px; font-size:14px; color:#FFF; background-color:#45444D; 
text-align:center; margin:auto; border:#fff solid lpx; padding:2px 0; } 
#footer af color:#FFF; background-color:#45444D; text-decoration:none; } 


至 此 所 有 的 编码 工作 都 已 完成 ， 下 面 我 们 来 运行 一 下 。 


1.1.4 ”运行 结果 


双击 运行 站 点 根 目录 中 的 tortoise.html 文件 ， 执 行 结果 如 图 1-1 所 示 。 
从 上 面 的 代码 中 可 以 看 到 ， 纯 正 的 div+CSS 布局 的 效果 非常 漂亮 ， 页 面 结构 也 很 简单 。 
如 果 少 了 CSS， 页 面 将 会 是 什么 样 呢 ? 


<@———= 
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可 用 的 小 乌 巢 -Windovs Interm 


GO Br me ettertorse ior 
全 中 天 阐 可 有 的- 所 上 


小 马 全 身 守 一 身 异 党 坚 辐 的 “ 迟 申 ”， 伸 着 四 名和 本 揭 霸 。 股 屿 于 要， 湛 售 
一 个 “大桥 军 ”。 可 这 位 “ 交 军 " 胆子 怕 史 小 ， 一 瑟 “ 葵 阵 ” 就 成 了 名 副 其 
二 的 扫兴 : 如 暴 有 个 人 坟 丰 它 莉 而 办 几 下 ， 它 出 会 环 得 下 利 下 锡 过 一 
一 一 头 、 性， 四 凡生 第 了 法 去 ， 这 了 好 一 会 ， 它 才 把 说 党 仿 信 地 榨 出 未 。 


小 乌 色 的 新 家 


我 知 逢 小 急 作 都 候 穴 政 阳光 ， 所 缠 让 区 音符 它们 仇 了 一 半 有 收 榜 幸 和 小 
阳 训 的 琉 议 让 子 。 看 巷 管 做 寻 了 之 后 ， 我 拓 急 必 抬 小 久久 送 到 了 新 家 中 


图 1-1 div+CSS 布局 效果 
下 面 我 们 在 tortoise html 文件 中 删 掉 这 一 行 代码 : 


<link rel="stylesheet" type="text/css" href="css/tortoise.css"/> 


然后 保存 ， 运 行 该 页 面 ， 其 效果 如 图 1-2 所 示 。 


OO [Ors comE 和 Nd\tise bt x 
突 Ws 业 。 因 可 委 的 小 8 多 租 " 国 -吉安 人 5 下 Qi 克 - 


可 爱 的 小 乌龟 | 


"站 页 
， 我 的 日 记 


， 雪 隐居 片 
"给 二 时 

最 近 买 了 一 只 可 爱 的 小 乌 鱼 ! 开心 | 1 1 

我 的 小 乌 鱼 


人 身 异常 坚固 的 “ 钢 甲 “， 侣 着 四 条 站 社 的 | 
临阵 “就 成 名副其实 的 缩 头 乌 旬 


了 了 ， 如 果 有 个 人 影 
志 过 了 好 一 二， 它 才 把 脑 化 偷偷 地 探 出 未 。 


2010-8-3 
小 乌龟 的 新 家 


我 知道 小 乌龟 都 很 喜欢 阳光 ， 
马 免 送 到 了 新 家中 。 

起 先 ， 它 在 水 中 自由 自在 地 游 瀛 ， 好 徊 要 游 bie 游 吕 了 ， 它 便 舍 下 脚步 ， 拒 可 爱 的 头 哲 起 并 你 出 水 
面 ， 左 看 一 眠 ， 右 看 一 眼 。 好 像 处 处 部 有 好 事 、 开 心事 在 等 


2010-8-1 10:21 


1-2 没有 CSS 的 Web 页面 


怎么 样 ， 是 不 是 觉得 惨不忍睹 啊 。 鉴 于 此 ， 想 必 大 家 对 CSS 的 作用 应 该 有 一 个 比较 深刻 
的 体会 了 吧 。 
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1.2 使 用 CSS 样式 


CSS 样式 表 一 个 非常 强大 的 特征 就 是 灵活 、 方 便 、 独 立 。 
传统 的 HTML 元 素 内 嵌 的 样式 设置 方式 使 HTML 代码 显得 非常 杂乱 , 嘿 呆 而 且 不 易 维护 。 
相对 于 此 ，CSS 样式 表 提 供 了 多 种 使 用 样式 的 方式 ， 让 我 们 可 以 更 加 灵活 地 配置 和 管理 CSS 


下 面 我 们 就 来 详细 了 解 一 下 这 些 方式 。 


上 视频 教学 : 光盘 /视频 /1/1.2 使 用 CSS 样式 avi 人 长 度 : 9 分 钟 


1.2:1 


基础 知识 一 一 CSS 样式 的 使 用 方式 


CSS 样式 表 是 因为 Web 而 存在 的 ， 所 以 CSS 样式 终归 是 要 应 用 到 HTML 页 面 中 的 。 
与 传统 的 HTML 元 素 内 嵌 的 样式 设置 方式 相 比 ，CSS 样式 表 的 一 个 非常 重要 的 特点 就 是 


灵活 。 它 支持 将 CSS 样式 作为 属性 设置 到 页 面 元 素 中 ; 也 支持 将 CSS 样式 表 集中 声明 在 页 面 


头 部 ， 还 支持 将 所 有 的 CSS 样式 表 内 容 存 放 到 一 个 单独 的 文件 中 ， 在 HTML 页 面 中 引入 。 

总 体 来 说 ，CSS 提供 了 以 下 4 种 使 用 CSS 样式 表 的 方式 : 内 嵌 样 式 、 内 部 样式 表 、 导 入 
样式 表 和 链 入 样式 表 。 下 面 我 们 对 它们 分 别 进行 介绍 。 

1. 内 赃 样 式 

内 棋 样 式 表 与 传统 的 HTML 元 素 内 嵌 样 式 的 方式 非常 相似 ， 也 是 直接 将 样式 定义 代码 作 
为 属性 定义 在 HTML 元 素 中 。 这 种 方式 的 特点 是 方便 、 直 观 ， 但 是 因为 其 与 HTML 页 面 结构 
的 强 耦 合 ， 使 得 样式 的 调整 与 页 面 结构 无 法 分 离 ， 因 此 给 维护 人 员 带 来 非常 大 的 不 便 。 

但 是 ， 这 种 方式 的 方便 性 使 得 我 们 在 设计 非常 简单 的 页 面 代码 时 更 加 直观 ， 也 使 整个 页 面 
显得 不 那么 复杂 ， 所 以 CSS 没有 把 它 抛弃 掉 。 

使 用 内 嵌 CSS 样式 也 非常 简单 。 我 们 可 以 直接 将 CSS 样式 声明 的 代码 作为 一 个 字符 串 设 
置 到 HTML 元 素 的 style 属性 当中 即 可 。 

例如 ， 要 在 页 面 中 显示 一 行 颜色 为 红色 的 、 字 体 大 小 为 13 像素 的 文本 ， 可 以 这 样 做 : 

<span style="color:red; font-size:13px; "> 这 是 一 行文 本 </span> 

同样 ， 对 应 的 传统 的 HIML 内 嵌 样 式 代码 如 下 : 


<font color="red"” size="2"> 这 是 一 行文 本 </font> 


\ 
注意 | 


font 标签 里 的 size 属性 可 能 会 因为 不 同 的 解析 方式 会 有 不 同 的 差异 (比如 
Dreamweaver 的 视图 方式 就 不 一 样 )， 不 过 现在 主流 的 浏览 器 (Internet Explorer 8、 
Firefox、Safari、Chrome) 都 能 正常 显示 。 
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2. 内 部 样式 表 
内 部 样式 表 是 将 所 有 的 样式 声明 代码 放置 于 页 面 头 部 。 你 可 以 在 页 面 头 部 的 head 元 素 内 
部 添加 一 个 style 元 素 ， 用 于 存放 样式 表 配 置 。 
@ ”其实 style 元 素 和 script 元 素 一 样 ， 可 以 放置 在 页 面 中 的 任何 位 置 ， 所 以 没有 必要 
提示 一 定 放 在 head 元 素 内 。 但 是 ， 按 W3C 标准 的 要 求 是 需要 将 其 放 在 head 元 素 内 统 
一 管理 ， 而 且 放 置 在 其 他 地 方 也 没什么 特别 的 好 处 ， 所 以 建议 放 在 head 元 素 中 。 


style 元 素 是 使 用 一 个 开始 标签 <style> 和 一 个 结束 标签 </style> 括 起 来 的 一 个 代码 段 。 元 素 
的 内 容 就 是 样式 表 的 所 有 配置 信息 。 比 如 我 们 要 为 页 面 中 所 有 的 div 设置 一 个 红色 的 1 像素 宽 
的 实 线 边 框 ， 可 以 使 用 以 下 代码 实现 : 
<style type="text/css"> 
div { 
border:solid lpx #c00; 


1 
</style> 


3. 导入 样式 表 


如 果 将 CSS 样式 表 声明 的 代码 单独 放 在 一 个 扩展 名 为 .css 的 文本 文件 中 , 就 可 以 在 页 面 中 
的 style 元 素 里 使 用 @import 语句 将 外 部 的 CSS 样式 表 文件 导入 。 

例如 上 面 为 div 设置 的 边框 样式 ， 可 以 使 用 样式 表单 独 存 放样 式 的 设置 信息 。 

可 以 先 新 建 一 个 名 为 test.css 的 样式 表 文件 ， 内 容 如 下 : 

div { 

border:solid lpx #c00; 
} 
然后 在 页 面 中 的 style 元 素 中 使 用 @import 将 该 文件 导入 ， 代 码 如 下 : 


<style type="text/css"> 
Qimport "test.css"; 


</style> 
这 样 我 们 就 可 以 正常 地 使 用 CSS 样式 表 文 件 中 定义 的 样式 了 。 
4. 链 入 样式 表 


链 入 样式 表 的 方式 和 导入 样式 表 的 方式 差不多 。 它们 都 是 将 样式 单独 存放 , 然后 在 HTML 
页 面 中 引入 该 样式 表 文件 。 

链 入 样式 表 是 在 head 元 素 中 使 用 link 元 素 将 其 引入 ， 外 部 样式 表 文 件 的 名 称 作为 link 元 
素 的 href 属性 的 值 设 置 即 可 。 

比如 刚才 创建 的 CSS 样式 表 文 件 test.css 就 可 以 使 用 链 入 样式 表 的 方式 引入 HIML 页 面 中 
使 用 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="test.css"/> 


那么 导入 样式 表 和 链 入 样式 表 有 什么 区 别 呢 ? 
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link 元 素 属于 HTML 级 的 ， 而 @import 属于 CSS 级 的 。 在 页 面 运行 的 时 候 ， 浏 览 器 获得 
HTML 代码 先进 行 HTML 标签 的 分 析 ，HTML 代码 在 遇 到 link 标签 时 会 去 加 载 link 标签 所 链 
接 的 资源 文件 ， 而 执行 到 包含 @import 语句 的 style 元 素 时 ， 浏 览 器 只 会 认为 它 是 一 个 HTML 
元 素 ， 并 不 会 去 顾及 这 个 元 素 的 内 容 。 而 在 执行 HTML 文档 的 时 候 ， 浏 览 器 会 直接 执行 link 
元 素 链 入 的 样式 表 内 容 ; 到 执行 style 元 素 的 时 候 ， 才 发 现 需要 导入 外 部 CSS 样式 表 文件 ， 这 
时 浏览 器 才 会 异步 请 求 CSS 样式 表 文 件 ， 并 同时 向 下 执行 HTML 文档 的 其 他 代码 。 

这 样 在 使 用 @import 的 时 候 ， 在 网 络 比较 慢 的 时 候 加 载 页 面 样式 经 常会 有 些 延 迟 ， 所 以 一 
般 页 面 开始 的 样式 非常 混乱 难看 ， 过 一 会 儿 才 会 恢复 本 来 的 样子 。 


1.2.2 ”实例 描述 


使 用 CSS 样式 非常 简单 。 前 面 我 们 已 经 讲 过 4 种 CSS 样式 的 使 用 方法 ， 下 面 这 个 实例 ， 
我 们 就 使 用 这 4 种 方法 配合 着 做 一 个 简单 的 页 面 。 


1.2.3 ”实例 应 用 


【 例 1-2】 使 用 CSS 样式 
(1) 先 选 择 一 个 目录 ， 用 于 作为 站 点 的 根 目 录 。 
(2) 在 目录 下 新 建 两 个 文件 夹 ， 命 名 为 css 和 imgs。 
(3) 在 imgs 文件 夹 中 放 入 一 个 作为 页 面 背景 的 图 像 文 件 ， 名 为 ypz.jpg。 
(4) 在 css 文件 夹 中 添加 两 个 CSS 样式 表 文件 ， 分 别 命 名 为 ypzl.css 和 ypz2.css。 
(5) 在 ypzl.css 中 添加 一 段 设置 页 面 背景 的 样式 代码 ， 如 下 所 示 : 


@charset "utf-8"; 


body { 
background-image:url(../imgs/ypz.jpg); 
background-position:center top; 
background-repeat:no-repeat; 


} 

(6) 在 ypz2.css 中 添加 一 段 设置 段落 字号 的 样式 代码 ， 如 下 所 示 : 
@charset "utf-8"; 

pi 


font-size:21px; 


} 
(7) 接 下 来 在 站 点 根 目录 下 创建 一 个 名 为 QuietNightThink.html 的 文件 。 
(8) 使 用 Windows 记事 本 打开 并 修改 QuietNightThink.html 文件 ， 添 加 内 容 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 


< 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Quiet night think</title> 
<link rel="stylesheet" type="text/css" href="css/ypzl.css"/> 
<style type="text/css"> 
Qimport "css/ypz2.css"; 
body { 
text-align:center; 
padding-top:70px; 
color:#805231; 
font-family:"Monotype Corsiva"; 
</style> 
</head> 


<body> 

<hl style="font-size:30px; padding-bottom:20px;">Quiet night think</hl> 
<p>Bed bright moonlight,</p> 

<p>Doubt is the ground frost.</p> 


<p>Withdrawing my eyes bright moon,</p> 
<p>Bow think hometown.</p> 


</body> 
</html> 


页 面 中 的 代码 用 到 了 前 面 讲 的 4 种 CSS 样式 用 法 。 接 下 来 我 们 运行 一 下 看 看 效果 。 


1.2.4 ”运行 结果 


使 用 Internet Explorer 打开 QuietNightThink.html 文件 ， 运 行 结果 如 图 1-3 所 示 。 
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1-3 ”运行 结果 


第 1 章 cmexr 情 


1.2.5 ”实例 分 析 


6 源码 解析 : 


本 实例 使 用 元 素 内 嵌 的 样式 设置 了 标题 元 素 hl 的 字体 和 下 间距 属性 ; 在 页 面 head 元 素 内 
使 用 内 部 样式 表 设 置 了 页 面 的 对 齐 方式 、 顶 部 间距 、 字 体 颜色 、 字 体 样 式 等 属性 ; 使 用 link 元 
素 链 入 了 一 个 外 部 CSS 样式 表 ypzl.css， 设 置 了 页 面 的 背景 图 片 等 属性 ; 在 页 面 style 元 素 中 
使 用 @import 语句 导入 一 个 外 部 CSS 样式 表 ypz2.css。 


1.3 CSS 的 语法 


CSS 也 是 一 种 语言 ， 一 种 标识 页 面 样式 的 标记 语言 ， 所 以 它 也 有 自己 的 语法 。 
在 CSS 样式 代码 中 ， 一 条 CSS 样式 声明 的 语句 可 以 由 两 部 分 组 成 : 选择 符 和 样式 列表 。 
当然 ， 这 里 要 将 使 用 元 素 内 嵌 的 样式 排除 在 外 。 
选择 符 是 定义 使 用 该 样式 列表 的 HTML 元 素 的 标识 符 ， 它 可 以 是 一 个 类 (HTML 元 素 的 class 
属性 )、 一 个 元 素 id 或 者 HTML 元 素 的 标记 名 称 。 
样式 列表 是 一 个 集合 ， 这 里 使 用 一 对 花 括 号 来 表示 一 组 样式 。 一 个 样式 的 设置 是 由 一 个 样 
式 属性 名 称 和 一 个 属性 值 组 成 的 ， 它 们 之 间 用 冒号 阳 开 。 一 个 样式 集合 中 多 个 样式 之 间 使 用 分 
号 分 隔 。 
CSS 样式 表 定义 语句 的 格式 如 下 : 
selector { 
property:value; 
property:value 
} 
就 比如 1.2 节 实例 中 用 过 的 对 body 元 素 设 置 的 样式 : 


body { 
text-align:center; 
padding-top:70px; 
color:#805231; 
font-family:"Monotype Corsiva"; 


1.4 增强 CSS 的 可 读 性 一 一 使 用 注释 


CSS 毕 竞 不 是 我 们 通常 使 用 的 自然 语言 ， 所 以 经 常会 有 些 令 人 难 懂 , 或 者 有 看 起 来 不 是 很 
直观 的 地 方 。 这 样 我 们 在 以 后 维护 的 时 候 就 需要 浪费 很 多 时 间 去 阅读 理解 这 些 设 置 代码 ， 非 常 
不 方便 。 


< 人 mm 
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当然 ， 使 用 自然 语言 对 CSS 样式 表 进 行 定 义 在 当前 情况 下 显然 是 不 可 能 的 事情 ， 所 以 我 
们 需要 想 一 些 办 法 ， 提 高 CSS 样式 代码 的 可 读 性 。 
对 于 这 个 问题 ， 有 一 个 首选 的 方式 就 是 使 用 注释 。 
注释 是 对 代码 的 一 种 说 明 性 的 标记 , 可 以 使 用 它 对 程序 代码 进行 说 明 , 使 其 更 加 易 读 易 懂 。 
在 CSS 中 可 以 使 用 斜 枉 “/” 和 星 号 “* ”的 组 合 来 标记 CSS 文件 的 注释 。 比 如 下 面 代 码 
就 定义 了 一 行 CSS 注释 : 
/* 这 是 一 行 注释 */ 
当然 ， 前 面 章节 中 定义 的 CSS 样式 也 可 以 更 进一步 地 进行 优化 ， 如 下 : 
body { /* 对 body 标记 添加 样式 */ 
text-align:center; /* 设置 元 素 中 文本 对 齐 方式 为 center (居中 ) */ 
padding-top:70px; /* 设置 元 素 顶 部 填充 空间 为 70px (像素 ) */ 
color:#805231; /* 设置 元 素 的 文本 颜色 为 #805231 */ 
font-family:"Monotype Corsiva"; /* 设置 元 素 中 文本 的 字体 为 Monotype Corsiva */ 


和 

这 样 是 不 是 就 会 觉得 更 加 清晰 易 读 了 ? 

当然 ， 有 些 常用 的 ， 一 看 就 明白 的 属性 没 必 要 加 注释 ， 比 如 color 等 。 这 些 没 必要 添加 注 
释 的 代码 省 去 注释 会 显得 非常 简洁 ， 所 以 注释 也 不 是 越 多 越 好 。 具 体 使 用 方式 视 情况 而 定 ， 灵 
活 运用 即 可 。 


1.5 CSS 优先 级 


所 谓 CSS 优先 级 ， 即 是 指 CSS 样式 在 浏览 器 中 被 解析 的 先后 顺序 。 作 为 页 面 设计 人 员 ， 
了 解 这 一 点 是 十 分 重要 的 ， 因 为 这 直接 关系 到 页 面 最 终 展示 的 效果 。 
要 了 解 CSS 样式 的 优先 级 , 我 们 必须 知道 CSS 样式 规则 的 一 个 很 重要 的 特性 一 一 继承 性 。 


上 EE 视频 教学 :光盘 /视频 /1/1.5 CSS 优先 级 avi 图 长 度 : 8 分钟 


1.5.1 CSS 的 后 来 居 上 原则 


由 于 CSS 只 是 一 组 规则 ， 因 此 当 规 则 重复 定义 时 并 不 会 有 什么 警告 或 者 提示 。 因 为 ， 有 
时 候 我 们 需要 对 样式 进行 重新 定义 而 编写 重复 的 规则 。 

比如 我 们 在 页 面 中 导入 多 个 样式 表 文 件 ， 多 个 样式 表 文 件 中 都 对 body 元 素 的 背景 进行 了 
不 同 的 设置 ， 系 统 则 自动 使 用 最 后 一 次 匹配 的 样式 进行 展示 。 

举 一 个 简单 的 例子 ,比如 我 们 不 小 心 在 同一 个 样式 规则 中 多 次 设置 div 元 素 中 文本 的 颜色 ， 
代码 如 下 : 

div { 


color:red; 


color:blue; 
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上 面 代码 先后 两 次 为 div 标记 设置 了 文本 颜色 属性 ， 页 面 中 展示 出 来 的 将 是 最 后 一 次 设置 


的 值 (这 里 是 蓝 色 (blue))。 
另外 ， 不 同 CSS 样式 的 引入 方式 也 可 能 会 对 该 原则 造成 影响 ， 这 一 点 主要 体现 在 引入 外 
部 CSS 样式 表 文 件 中 。 


引入 外 部 CSS 样式 表 文 件 有 两 种 方式 ， 使 用 起 来 各 有 差异 ， 详 细 说 明 如 下 。 

@ ” @import 语句 导入 : 该 语句 导入 的 CSS 样式 表 文 件 内 容 会 自动 加 入 到 当前 style 元 素 
的 顶端 执行 ， 也 就 是 说 导入 的 样式 先 于 当前 style 元 素 中 配置 的 任何 CSS 样式 执行 。 
如 果 当 前 style 元 素 中 导入 多 个 CSS 样式 表 文 件 ， 那 么 它们 之 间 则 按 导入 的 先后 顺序 
进行 解释 执行 。 当 然 多 个 style 元 素 互 相 之 间 就 没有 什么 影响 了 。 

@ “link 元 素 链 入 : 该 元 素 的 使 用 比较 简单 ， 它 只 在 使 用 link 元 素 链 入 样式 表 文 件 的 位 置 
进行 解析 ， 先 后 顺序 以 link 标签 的 顺序 为 准 。 这 一 点 没有 什么 异议 。 

当然 ， 如 果 上 升 到 HTML 文档 级 别 ，style 元 素 和 link 元 素 执行 的 先后 顺序 就 以 它们 在 

HTML 文档 中 的 先后 顺序 为 准 。 


1.5.2 CSS 的 继承 性 


继承 是 CSS 一 个 非常 重要 的 特性 ， 它 是 依赖 于 HIML 中 元 素 节点 的 父 - 子 级 关系 (元 素 的 
包含 关系 ) 的 。 它 允许 样式 不 仅 可 以 应 用 于 当前 指定 的 元 素 ， 还 可 以 应 用 到 当前 元 素 下 的 子 元 
素 (当然 也 包括 “孙子 ”级 以 上 的 元 素 ) 中 。 

比如 页 面 中 有 以 下 代码 : 

<div id="recolor"> 

当前 元 素 的 内 容 
<div> 
子 元 素 中 的 内 容 


<div> 
下 一 级 子 节点 (孙子 级 节点 ) 中 的 内 容 
</div> 
</div> 
</div> 


然后 为 其 添加 样式 : 


<style type="text/css"> 
#recolor { 
color:red; 

} 

</style> 

这 样 页 面 中 的 所 有 文本 的 样式 都 被 设置 为 红色 (red) 了 。 

当然 ， 也 不 是 所 有 的 CSS 样式 都 能 够 被 继承 。 

CSS 提供 了 智能 分 析 的 功能 ， 一 些 我 们 一 定 不 想 被 继承 的 样式 ， 则 不 会 被 子 元 素 继承 ， 比 
如 border、margin、padding、background 等 。 因 为 一 旦 这 些 样式 被 继承 ， 则 会 对 页 面 的 样式 产 
生 非 常 大 的 影响 ， 这 些 是 我 们 不 想 看 到 的 。 
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比如 刚才 的 页 面 代码 ， 我 们 为 其 添加 一 个 边框 样式 ， 代 码 如 下 : 


<style type="text/css"> 
#recolor { 
color:red; 
border:solid 3px blue; 
} 
</style> 


这 样 如 果 border 样式 被 继承 ,页 面 中 每 一 行文 字 将 会 被 一 个 蓝 色 的 边框 套 住 , 但 事实 上 并 
不 是 这 样 ， 如 图 1-4 所 示 。 
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图 1-4 样式 继承 运行 结果 


从 图 1-4 中 可 以 看 到 ， 虽 然 所 有 的 文本 都 变 成 了 红色 ， 但 是 并 不 是 所 有 的 div 元 素 都 添 
加 了 边框 ， 只 是 最 外 层 的 div( 也 就 是 样式 设置 的 当前 元 素 ) 被 添加 了 一 个 3 像素 宽 的 蓝 色 实 线 
边框 。 


1.5.3 ”CSS 的 选择 器 优先 级 


前 面 提 过 “后 来 居 上 原则 ”和 “继承 性 ”， 还 有 一 个 虽然 不 很 引 人 注 意 ， 但 是 非常 重要 的 
优先 级 规则 就 是 选择 器 匹配 的 优先 级 ， 这 一 点 是 CSS 优先 级 中 最 复杂 、 最 不 容易 理解 的 。 
一 个 选择 器 中 可 以 有 多 个 选择 符 。CSS 中 的 选择 符 主 要 分 为 三 类 : id 选择 符 、class 选择 符 
和 HTML 标签 选择 符 。 
显然 ，id 选择 符 是 为 了 根据 id 选择 匹配 的 HTML 元 素 ，class 选择 符 是 根据 元 素 的 class 
| 属性 进行 匹配 ，HTML 标签 选择 符 就 是 根据 元 素 的 标记 进行 匹配 的 。 


\ 
全 过 里 简单 提 一 下 选择 符 ， 具 体 用 法 在 以 后 的 章节 中 会 进行 详细 讲解 


在 一 条 CSS 样式 规则 的 选择 器 中 ， 可 能 会 有 多 个 选择 符 组 合 进行 元 素 的 精确 定位 。 比 如 
下 面 的 样式 定义 规则 : 
#bbb div { 
font-size:30px; 
} 
上 面 代码 定义 了 一 个 选择 器 “#bbb div”， 其 中 包含 两 个 选择 符 “#bbb” 和 “div”。 
选择 器 优先 级 就 是 根据 选择 符 的 权重 进行 组 合并 选择 使 用 元 素 的 样式 。 上 面 说 的 三 类 选择 
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符 中 ，id 的 权重 最 高 ，class 次 之 ，HTML 标签 的 权重 最 低 。 


在 CSS 样式 表 中 匹配 的 规则 是 查询 选择 器 中 每 一 类 选择 符 的 个 数 ， 然 后 进行 分 类 。 组 成 


一 组 三 个 整数 ， 按 选择 符 的 权重 排序 ， 进 行 比 较 。 


旦 
是 “ 


比如 上 面 的 选择 器 中 使 用 了 一 个 id 选择 符 和 一 个 标签 选择 符 ， 那 么 上 面 选 择 器 的 权重 就 
“1、0、1”(id、class、HTML 标签 )。 
比较 的 时 候 先 比较 id 选择 符 对 应 的 值 ， 哪 个 样式 规则 选择 器 中 的 值 大 ， 就 取 哪 个 规则 中 


的 值 ， 接 下 来 比较 class 选择 符 对 应 的 值 ， 然 后 比较 HTML 标签 选择 符 的 值 。 


如 果 说 两 个 CSS 样式 选择 器 的 权重 相同 ， 则 按 “ 后 来 居 上 ”的 原则 匹配 。 
比如 页 面 中 有 这 样 一 段 HTML 代码 : 


<div id="bbb" class="xxx"> 
<div id="ddd" class="ccc"> 这 是 一 行文 本 </div> 
</div> 


而 且 在 页 面 头 部 的 style 标签 中 声明 了 以 下 样式 声明 代码 : 


.xxx #ddd { 
font-size:10px; 

} 

bbb -Eee { 
font-size:30px; 


} 
因为 两 个 样式 规则 的 选择 器 权重 比 相 同 ， 所 以 使 用 后 面 的 那个 样式 规则 ， 页 面 中 文本 大 小 


将 为 30 像素 。 


不 过 需要 注意 一 点 ， 并 不 是 所 有 优先 级 低 的 样式 规则 都 不 起 作用 。 样 式 优先 级 的 权重 比 只 


是 在 样式 设置 重复 或 者 冲突 的 情况 下 才 起 作用 。 


可 能 这 句 话 不 好 理解 ， 我 们 来 举 个 例子 。 比 如 上 面 的 样式 声明 做 这 样 的 修改 : 


.XXX #ddd { 
font-size:10px; 
color:Green; 

} 

#bbb -cee { 
font-size:30px; 


} 
这 样 虽然 页 面 中 字体 大 小 是 30px, 但 是 其 同样 使 用 了 优先 级 低 的 样式 规则 中 的 修改 字符 颜 


色 的 样式 。 页 面 中 将 显示 一 行 绿色 的 30px 大 小 的 文字 ， 如 图 1-5 所 示 。 


1-5 样式 选择 器 的 优先 级 


< 


1.5.4 !important 声明 强制 优先 


CSS 优先 级 中 还 有 一 个 最 无 敌 的 声明 ， 就 是 limportant。 

在 CSS 样式 表 中 ， 带 有 !important 声明 的 样式 优先 使 用 ， 它 的 优先 级 会 超越 任何 地 方 、 任 
何方 式 的 样式 声明 ， 包 括 行内 style 属性 中 声明 的 样式 。 

比如 下 面 代码 : 

<style type="text/css"> 

div{ color:red !important; } 

</style> 

<div style="color: blue; "> 这 是 一 行文 字 </div> 

这 里 的 这 行文 字 在 浏览 器 中 仍然 显示 为 红色 字体 。 

所 以 ，CSS 样式 匹配 的 优先 权 遵循 以 下 顺序 : 

(1) limportant 声明 高 于 一 切 。 

(2) 内 顽 样 式 次 之 。 

(3) 样式 表 中 声明 按 选 择 器 的 权重 排序 。 

(4) 最 后 按 浏 览 器 执行 样式 表 的 顺序 ， 遵 循 “ 后 来 居 上 ”原则 匹配 样式 。 

当然 最 后 还 要 强调 一 点 : 如 果 没 有 设置 样式 的 ， 则 自动 继承 父 级 节点 的 样式 。 


1.6 CSS 中 风格 不 一 的 文字 


CSS 既然 要 标识 样式 ， 就 少不了 使 用 数量 词 的 形式 表示 物体 的 度量 。 当 然 ， 使 用 数量 词 就 
少不了 单位 。 

平常 我 们 生活 中 经 常 使 用 的 单位 有 长 度 、 重 量 、 温 度 、 时 间 、 速 度 、 面 积 、 体 积 等 很 多 种 。 
而 在 Web 页 面 中 ， 我 们 只 需要 使 用 CSS 样式 在 页 面 中 展示 一 个 平面 图 像 即 可 ， 所 以 这 里 我 们 
只 需要 表示 一 些 长 度 、 颜 色 之 类 的 可 视 化 信息 。 

下 面 我 们 就 来 了 解 一 下 CSS 中 的 单位 。 


视频 教学 : 光盘 /视频 /1/1.6 CSS 中 风格 不 一 的 文字 .avi OO 长 度 : 8 分 钟 
1.6.1 基础 知识 一 一 CSS 中 的 单位 
CSS 中 的 值 一 般 可 以 分 为 几 种 : 数值 、 字 符 串 、 常 量 、url 等 。 


数值 在 CSS 中 一 般 指 的 是 长 度 ， 是 对 页 面 中 对 象 大 小 的 说 明 ; 字符 串 一 般 是 一 些 特定 的 
值 ， 例 如 字体 等 ， 常 量 一 般 指 的 就 是 一 些 特定 的 值 了 ， 比 如 颜色 red、blue 等 ;ul 就 是 指 一 个 


资源 路 径 了 。 
其 中 最 常见 的 也 就 是 长 度 、 颜 色 、url 这 几 种 单位 了 ， 另 外 还 有 一 种 比较 特殊 的 长 度 单位 
就 是 百分比 单位 。 


sf} >> 


下 面 我 们 分 别 对 它们 进行 介绍 。 
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1. 长 度 单位 


长 度 单位 主要 分 为 两 种 : 相对 长 度 单位 和 绝对 长 度 单 位 。 

相对 长 度 单位 主要 有 以 下 几 种 。 

@ em: 元 素 的 字体 的 高 度 。 

@ ex: 相对 于 字母 x 的 高 度 。 

@ px: 像素 (Pixels)。 该 单位 是 相对 于 显示 器 分 辩 率 的 长 度 单位 。 因 为 计算 机 可 视 化 界面 
都 主要 显示 在 显示 器 中 , 所 以 px 是 计算 机 中 最 常用 的 长 度 单位 。 同样 在 Web 页 面 中 ， 
px 也 是 最 常用 的 单位 。 

我 们 在 页 面 中 定义 元 素 的 宽度 和 高 度 经 常会 使 用 px 作 单 位 ， 例 如 下 面 代码 : 

[EN 
width:350px; 
height:80px; 


} 


有 一 个 百分比 长 度 单位 ， 也 算是 一 个 相对 单位 。 因 为 其 比较 特殊 ， 我 们 将 会 单独 

和 到 | 。 对 它 进行 讲解 。 

绝对 长 度 单 位 有 以 下 几 种 。 
in: 英寸 Inches。1 英寸 相当 于 25.4 毫米 。 
cm: 厘米 (Centimeters)。 
mm: 毫米 (Millimeters)。 
pt: 点 (Points)。1 点 相当 于 1/72 英寸 。 
pc: 皮卡 (Picas)。 这 个 是 打印 机 使 用 的 字体 大 小 。 
绝对 长 度 单位 视 输出 介质 而 定 ， 所 以 在 Web 页 面 中 使 用 起 来 很 不 方便 。 


人 |。 绝对 单位 的 换算 关系 : lin=6pe =72pt=25.4mm = 2.54cm 


2. 百分比 单位 
百分比 单位 是 一 个 比较 特殊 的 长 度 单位 。 一般 它 指定 的 是 当前 元 素 本 身 相对 于 父 级 元 素 的 
大 小 。 
比如 我 们 经 常会 在 表格 的 同一 行 的 单元 格 中 使 用 该 单位 ， 以 便 使 同一 行 的 单元 格 能 等 比 地 
均 分 表格 的 宽度 。 代 码 如 下 : 
<table style="width:100px;"> 
EAn 
<td style="width:30%;">g&nbsp;</td> 
<td style="width:70%;">g&nbsp;</td> 


</tr> 
</table> 


这 样 同一 行 中 的 两 个 单元 格 一 个 宽度 为 30%， 一 个 宽度 为 70%。 那 么 如 果 表 格 宽度 为 100 


< 
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像素 ， 它 们 两 个 的 宽度 就 分 别 为 30 像素 和 70 像素 ; 如 果 表 格 宽度 为 300 像素 ， 它 们 两 个 的 宽 
度 分 别 为 90 像素 和 210 像素 。 
3. 颜色 单位 


颜色 值 有 两 种 形式 : 使 用 关键 字 表示 的 常用 颜色 和 使 用 RGB 值 表示 的 具体 颜色 值 。 

颜色 关键 字 比较 直观 ， 比 如 代表 红色 的 red、 代 表 蓝 色 的 blue、 代 表 黄 色 的 yellow 和 代表 
绿色 的 green。 但 是 使 用 颜色 关键 字 只 能 表示 最 常用 的 一 些 颜色 ， 如 果 需 要 表示 得 更 加 丰富 多 
彩 ， 就 可 以 使 用 RGB 值 的 方式 来 表示 颜色 。 

用 RGB 值 表示 颜色 有 4 种 方式 。 

@  #rggbb: 三 个 两 位 的 十 六 进 制 无 符号 整数 ， 取 值 范围 在 00 一 华 之 间 ， 如 #e7ccsb。 

@ ”gb: 三 个 一 位 的 十 六 进 制 无 符号 整数 ， 取 值 范 围 在 0~f 之 间 ， 如 #ce8， 等 同 于 第 一 

种 形式 的 #ccee88。 

@ rgb(r,g,b) : 括号 中 的 r、g、b 都 是 一 个 0 一 255 的 十 进 制 整数 。 

@ rgb(r%,g%,b%): 括号 中 的 r、g、b 都 是 一 个 0 一 100 的 十 进 制 数字 。 

比如 要 表示 蓝 色 ， 我 们 可 以 使 用 下 面 5 种 方式 中 的 任意 一 种 : 

blue 

rgb (0%,0%,100%) 

rgb(0,0,255) 

#00f£ 

#0000ff£ 


4. url 

url 是 一 个 地 址 。 

一 个 URL 值 的 格式 为 

url (foo) 

上 面 参 数 foo 是 一 个 URL( 统 一 资源 定位 符 ), 是 一 个 资源 的 地 址 。 该 地 址 可 以 是 绝对 路 径 ， 
也 可 以 是 相对 路 径 。URL 可 以 选择 用 单 引 号 () 或 者 双 引 号 (") 引 用 ， 或 者 直接 写 进 括号 也 可 以 。 

例如 要 表示 当前 目录 中 的 一 个 名 为 Logo.gif 的 图 片 资源 ， 可 以 使 用 以 下 语句 : 


url (Logo.gif) 


1.6.2 ”实例 描述 


CSS 中 的 单位 使 用 十 分 频繁 ,以 后 大 家 会 大 量 用 到 它们 。 所 以 本 实例 只 是 简单 地 使 用 上 面 
讲 过 的 单位 在 页 面 中 显示 一 些 内 容 。 


1.6.3 ”实例 应 用 


【 例 1-3】CSS 中 风格 不 一 的 文字 


sf) >> 
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(1) 选择 一 个 目录 作为 站 点 的 根 目录 。 

(2) 在 根 目录 中 添加 一 个 css 文件 夹 和 一 个 img 文件 夹 。 

(3) 在 img 文件 夹 下 存放 一 个 用 于 做 背景 的 图 片 文件 ， 名 为 febjpg。 
(4) 在 css 文件 夹 下 创建 一 个 名 为 font.css 的 CSS 样式 表 文 件 。 

(5) 修改 font.css 文件 ， 添 加 样式 声明 代码 ， 如 下 所 示 : 

Qcharset "utf-8"; 


#px { 
font-size:13px; 


} 

#ex { 
font-size:3ex; 

上 

#em { 
font-size:1lem; 

} 

#in { 
font-size:0.3in; 

} 

#cm { 
font-size:1lcm; 

} 

#mm { 
font-size:6mm; 

} 

#pt { 
font-size:20pt; 

} 

#pc { 
font-size:3pc; 

} 

body { 
background-image:url(../imgs/fgb.jpg); 

| 

div { 
color:#999; 

n 

pi 
color:rgb(10%,10%,10%); 

} 


上 面 代码 分 别 设置 了 不 同 id 使 用 的 不 同 单位 显示 的 文本 。 并 为 页 面 中 body 元 素 添加 一 个 
背景 图 片 ， 然 后 对 div 元 素 和 了 元 素 设置 文本 颜色 。 

(6) 在 站 点 根 目录 下 添加 一 个 HTML 文件 ， 名 为 fonthtml。 

(7) 使 用 Windows 记事 本 打开 并 修改 fonthtml 文件 ， 内 容 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


<@— 


A 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="css/font.css"/> 
<title>Font</title> 

</head> 


<body> 

<p id="px"> 天 净 沙 </p> 

<p id="ex"> 秋 思 </p> 

<p id="em"> ( 马 致远 ) </p> 

<div id="in"> 枯 芯 老 树 昏 鸦 ，</div> 
<div id="cm"> 小 桥 流水 人 家 ，</div> 
<div id="mm"> 古 道 西 风 瘦 马 。</div> 
<div id="pt"> 夕 阳 西 下 ，</div> 
<div id="pc"> 断 肠 人 在 天 涯 。</div> 
</body> 

</html> 


1.6.4 ”运行 结果 
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图 1-6 运行 结果 


1.6.5 ”实例 分 析 


an 


本 实例 分 别 使 用 不 同 的 长 度 单位 为 页 面 中 不 同 的 元 素 定义 文本 大 小 ; 然后 使 用 两 种 颜色 声 
明 方 式 为 页 面 中 两 种 HTML 标签 指定 浅 灰 和 深 灰 两 种 不 同 的 文本 颜色 ; 最 后 使 用 url 引用 一 个 
图 片 资源 文件 为 页 面 中 的 body 元 素 添加 一 个 背景 图 像 。 
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1.7 选择 一 款 网 页 制作 工具 


“ 工 欲 善 其 事 ， 必 先 利 其 器 。” 

尽管 选择 什么 样 的 网 页 制作 工具 不 会 影响 设计 的 网 页 质量 的 好 坏 , 但 是 如 果 有 一 款 功能 强 
大 ， 使 用 简单 的 网 页 制作 工具 往往 会 让 我 们 的 开发 工作 事半功倍 。 

例如 ， 前 面 我 们 一 直 使 用 的 是 Windows 系统 自 带 的 记事 本 工具 编辑 HTML 文件 ， 没 有 语 
法 检查 、 没 有 代码 格式 化 、 没 有 自动 提示 ， 代 码 编写 起 来 相当 痛苦 ， 如 图 1-7 所 示 。 


图 1-7 记事 本 编辑 HTML 文档 


可 以 制作 网 页 的 工具 比较 多 。 因 为 网 页 是 文本 文件 ， 所 以 只 要 能 处 理 文字 的 工具 都 可 以 对 
网 页 进行 编辑 ， 比 如 前 面 所 说 的 记事 本 ， 或 者 说 一 些 稍微 高 级 一 点 的 工具 ， 比 如 UltraEdit、 
EditPlus 等 。 

当然 ， 在 Web 应 用 程序 如 此 盛行 的 年 代 ， 专 业 的 网 页 制作 工具 也 层出不穷 。 其 中 就 有 微 
软 公司 的 FrontPage。 

FrontPage 是 作为 Office 办 公 套 件 中 的 组 件 一 起 推出 的 ， 所 以 其 主 界面 与 其 他 的 Office 工 
有 具 十 分 相似 。 当 然 ， 功 能 也 很 强大 ， 使 用 起 来 也 非常 简单 。 

FrontPage 的 主 界面 如 图 1-8 所 示 。 

目前 大 多 数 网 页 制作 人 员 都 喜欢 使 用 所 见 即 所 得 的 编辑 工具 ， 而 FrontPage 就 属于 这 一 类 
型 的 。 

它 出 自 于 软件 帝国 微软 的 旗下 ， 优 点 自然 不 必 多 说 。 

不 过 ， 下 面 我 们 要 请 出 一 位 网 页 制作 界 的 重量 级 选手 一 一 Dreamweaver， 它 在 网 页 制作 方 
面相 对 于 FrontPage 来 说 有 过 之 而 无 不 及 。 

Dreamweaver 是 Macromedia 公司 的 产品 ， 它 与 Flash、Fireworks 并 称 网 页 三 剑客 ,是 网 页 
制作 工具 界 的 霸主 。 多 少年 来 独 领 风骚 ， 连 FrontPage 都 不 是 它 的 对 手 。 

Dreamweaver 是 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 ， 它 是 第 一 套 针 
对 专业 网 页 设计 师 特别 开发 的 视觉 化 网 页 开发 工具 , 利用 它 可 以 轻而易举 地 制作 出 充满 动感 的 
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图 1-8 FrontPage 2003 的 主 界面 


Dreamweaver 的 主 界面 如 图 1-9 所 示 。 
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图 1-9 Dreamweaver 的 主 界面 


Dreamweaver 主要 有 以 下 优点 。 


最 佳 的 制作 效率 : Dreamweaver 可 以 使 用 鼠标 拖 搜 的 方式 快速 地 放 入 页 面 元 素 ， 它 的 
智能 提示 的 功能 可 使 你 更 加 怪 意 地 编写 代码 。 

网 站 管理 : Dreamweaver 使 用 网 站 地 图 可 以 很 方便 地 管理 站 点 资源 和 文件 。 

无 可 比拟 的 控制 能 力 : Dreamweaver 是 唯一 提供 Roundtrip HTML、 视觉 化 编辑 与 原始 
码 编辑 同步 的 设计 工具 。 

集成 动态 开发 语言 : Dreamweaver 还 集成 了 动态 程序 开发 语言 , 完全 支持 ASP、NET、 
PHP、JavaScript 的 基本 语言 和 连接 操作 数据 库 的 功能 。 


总 之 ，Dreamweaver 是 一 个 非常 优秀 的 网 页 制作 工具 。 正 如 它 的 名 字 一 样 ， 能 使 你 的 网 页 
设计 工作 像 编织 一 个 美丽 的 梦 一 样 美妙 。 
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| 在 本 书 中 ， 我 们 将 主要 使 用 Dreamweaver 工具 进行 讲解 和 演示 。 
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1.8 常见 问题 解答 


1.8.1 学 习 CSS 需要 哪些 特殊 的 软件 


学 习 CSS 需要 哪些 特殊 的 软件 吗 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-11367-1-1.html 


请 问 学 习 CSS 需要 哪些 特殊 的 软件 或 特殊 的 工具 吗 ? 
【解决 办 法 】 不 用 。 
CSS 和 HTML 一 样 ， 都 是 纯 文 本 内 容 ， 所 以 在 学 习 CSS 的 时 候 只 需要 使 用 Windows 自 带 
的 记事 本 (Notepad.exe) 就 可 以 了 。 
不 过 在 实际 制作 网 页 的 时 候 可 能 需要 用 到 Dreamweaver 等 专业 的 网 页 设计 软件 , 它们 将 使 
得 为 网 页 添加 CSS 的 工作 变 得 异常 简单 。 


1.8.2 CSS+div 菜鸟 级 问题 


CSS+div 菜鸟 级 问题 。 
网 络 课堂 : http://bbs.itzcn.comythread-11368-1-1.html 


我 在 做 网 站 的 时 候 , 有 一 个 问题 : 全 站 用 CSS+div 布局 , 现在 如 果 换 分 辨 率 或 者 换 显示 器 ， 
会 有 不 同 的 显示 效果 ,我 的 要 求 只 有 一 个 ， 那 就 是 不 论 是 换 什 么 显示 器 ， 什 么 分 辨 率 下 面 看 到 
的 结果 都 是 一 样 的， 请 问 高 手 们 这 个 问题 该 如 何 解决 ， 希 望 能 够 讲 得 详细 一 些 ， 谢 谢 。 

【解决 办 法 】 设 定 顶 级 box 宽度 ， 且 为 具体 的 宽度 ， 如 px、em、pt 等 ， 而 不 是 使 用 百 分 
比 控制 宽度 %。 

而 且 还 要 注意 ， 你 使 用 的 是 div，div 在 默认 情况 下 宽度 是 100%。 


1.8.3 学 习 CSS 都 需要 哪些 基础 知识 


学 习 CSS 都 需要 哪些 基础 知识 。 
网 络 课堂 : http:/bbs.itzcn.comythread-11369-1-1 .html 
听 网 上 说 CSS 不 错 ， 我 想 学 CSS， 但 对 这 些 东西 不 了 解 ， 我 都 要 学 些 什么 东西 啊 ? 
【解决 办 法 】CSS 是 对 Web 页 面 中 的 内 容 进 行 样式 设置 的 ， 所 以 学 习 CSS 之 前 你 最 起 码 
要 掌握 一 些 HIML 的 知识 。 
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1. 填空 题 


(1) CSS 是 的 缩写 形式 。 
(2) 有 以 下 代码 : 


<style type="text/css"> 

div{ color:blue; /* 蓝 色 */ } 
#d1{ color:red; /* 红色 */ } 
#d2{ color:yellow; /* 黄色 */ } 
</style> 


<div id="d1"> 
<div id="d2"> 
<div id="d3"> 请 说 出 这 行文 本 的 颜色 </div> 
</div> 
</div> 


运行 以 后 ， 浏 览 器 中 这 行文 本 将 显示 色 。 
(3) 某 div 元素 的 宽度 为 270px， 它 有 一 个 子 元 素 宽度 设置 为 10%， 那 么 这 个 子 元 素 在 页 


面 中 显示 的 宽度 为 px 


sf} >> 


(4) 在 一 个 样式 表 文 件 bg.css 中 设置 了 body 元素 的 背景 色 ， 代 码 如 下 : 
body { 

background-color:rgb(0%，0%，100%); /* 蓝 色 */ 
} 


然后 在 页 面 中 对 body 进行 了 一 次 背景 色 的 设置 并 引入 了 bg.css 样式 表 文 件 ， 代 码 如 下 
<style type="text/css"> 
body { 

background-color:#0f0; /* 绿色 */ 
} 
@import "bg.css"; 
</style> 

么 ， 最 后 浏览 器 中 页 面 背景 色 将 为 色 。 

2. 选择 题 
(1) 在 下 面 关 于 CSS 样式 的 说 明 ， 其 中 不 是 CSS 的 优势 。 

A.、 Web 页 面 样式 与 结构 分 离 

B. 页 面 下 载 时 间 更 快 

C.， 轻松 创建 及 编辑 

D. 使 用 CSS 能 够 增加 维护 成 本 
(2) 使 用 CSS 样式 表 对 页 面 设置 背景 色 为 rgb(255, 0, 0), 那么 在 浏览 器 中 页 面 的 背景 色 将 


(3) 


(Go) 


(5) 


be 

色 . 
A. 红 B. 蓝 C. 绿 D. 黄 
长 度 单位 px 是 相对 于 的 ， 所 以 在 计算 机 中 通常 以 它 作为 长 度 衡量 单位 。 
A. 屏幕 大 小 B. 显示 器 分 辩 率 
C.， 电脑 配置 D. 打印 尺寸 
下 面 定 义 的 CSS 样 式 ， 不 能 正常 设置 页 面 背 景 图 片 。 
A. 
body { 

background-image:url ("gb.jpg"); 
} 
B. 
body { 

background-image:url (gb.jpg); 
1 
CG 
body { 

background-image:url('gb.jpg'); 
} 
D; 
body { 

background-image:gb.jpg; 
1 
页 面 中 有 以 下 代码 : 


<style type="text/css"> 

div{ color:blue; /* 蓝 色 */ } 

#d1 #d2 div{ color:yellow; /* 黄色 */ } 
#d1l div{ color:red; /* 红色 */ } 
div#d3{ color:green; /* 绿色 */ } 
</style> 


<div id="d1"> 
<div id="d2"> 


<div id="d3"> 请 说 出 这 行文 本 的 颜色 </div> 


</div> 
</div> 
在 浏览 器 中 运行 以 后 ， 在 页 面 中 这 行文 本 的 颜色 为 
A， 蓝 色 B. 黄色 C. 红色 D. 绿色 
3. 上 机 练习 


上 机 练习 : 使 用 Dreamweaver 创建 一 个 简单 的 页 面 


< 


通过 本 章 的 学 习 ， 我 们 已 经 对 CSS 有 了 一 个 比较 全 面 的 了 解 。 而 且 我 们 在 本 章 中 介绍 了 
几 种 网 页 制作 工具 。 

本 练习 我 们 就 使 用 Dreamweaver 创建 一 个 简单 的 页 面 , 在 Dreamweaver 中 使 用 外 部 样式 表 
为 页 面 设置 一 张 背 景 图 片 ， 并 更 改 页 面 中 文本 的 字体 颜色 ， 如 图 1-10 所 示 。 
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1-10 ”使 用 Dreamweaver 编辑 网 页 


sf} >> 


内 容 摘 要 : 

任何 HTML 元 素 都 可 以 是 一 个 CSS 的 选择 符 。 选 择 符 仅仅 是 指向 特别 样式 的 元 素 ， 例 如 
选中 页 面 中 指定 id 的 元 素 之 后 ， 就 可 以 对 这 个 元 素 的 样式 或 者 事件 进行 设置 ， 这 种 选择 符 就 
叫做 id 选择 符 ， 这 只 是 选择 符 中 的 一 种 。 选 择 符 还 包括 通用 选择 符 、 类 型 选择 符 、class 选择 
符 、 伪 类 及 伪 元 素 选 择 符 、 群 组 选择 符 和 包含 选择 符 等 。 

本 章 将 讲解 CSS 选择 符 的 使 用 。 


学 习 目标 : 


了 解 并 掌握 通用 选择 符 

了 解 并 掌握 类 型 选择 符 

了 解 并 掌握 id 选择 符 

了 和 解 并 掌握 class 选择 符 

了 解 并 掌握 伪 类 及 伪 元 素 选择 符 
了 解 并 掌握 群 组 选择 符 

了 解 并 掌握 包含 选择 符 
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2.1 设置 指定 文字 的 样式 


在 CSS 样式 中 ， 如 果 要 选择 所 有 具有 共同 属性 的 标签 元 素 ， 可 以 使 用 通用 选择 符 。 如 果 
要 选择 页 面 中 所 有 的 标签 元 素 ， 可 以 使 用 “* ”选择 符 。 


只 视频 教学 : 光盘 /视频 /2/2.1 设置 指定 文字 的 样式 .avi @ 长 度 : 4 分 钟 


2.1.1 基础 知识 一 一 通用 选择 符 


通用 选择 符 用 于 从 文档 中 获取 所 有 元 素 。 它 的 基本 语法 如 下 : 

*{sResult} 

使 用 通用 选择 符 时 ,通常 可 结合 上 下 文 来 搜索 查找 元 素 。 假 如 通用 选择 符 不 是 单一 选择 符 
中 的 唯一 组 成 ，“*” 可 以 省 略 。 

例如 ， 下 面 实例 代码 : 


<p>p 元 素 </p> 
<div>div 元 素 </div> 


设置 p 元 素 和 div 元 素 的 字体 颜色 为 红色 ，CSS 代码 如 下 : 


-oolor Led 


2.1.2 ”实例 描述 


在 HTML 页 面 中 ， 免 不 了 有 很 多 同样 的 标签 ， 如 果 有 些 标签 具有 同一 个 CSS 样式 ， 那 么 
就 不 能 一 个 一 个 地 给 它们 设置 样式 了 , 因为 那样 会 很 繁琐 , 使 用 通用 选择 符 就 能 解决 这 个 问题 。 


2.1.3 ”实例 应 用 


【 例 2-1】 设置 指定 文字 的 样式 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 tongyong.html。 
(2) 现在 页 面 中 有 5 个 p 元 素 ， 代 码 如 下 所 示 : 


<div id="p div"> 

<p> 一 日 天 伦 乐 ”夫妻 互 敬 互 爱 ， 兄 弟 亲热 相好 ， 她 妊 和 睦 相 处 ， 儿 女 孝 顺 父母 ， 长 非 关心 晚辈 ， 
经 常 让 属于 自己 的 小 天 地 充满 温馨 。</p> 

<p> 二 日 运动 乐 ” 若 要 健 ， 天 天 练 ， 运 动 是 健康 的 源泉 ; 活动 好 比 灵 芝 草 ， 何 必 苦 把 仙 方 找 ; 年 轻 
跳 蹦 蹦 ， 到 老 没 病痛 ; 身体 锻炼 好 ， 八 十 不 服 老 。</p> 

<p lang="af"> 三 日 聊天 乐 </p> 

<p> 四 日 互助 乐 ” 鱼 水 生存 ， 人 人 活着 ,我 为 人 人 ， 人 人 为 我 。 一 人 有 难 大 家 帮 ， 一 家 有 事 百 家 忙 ; 
我 帮 别 人 要 忘却 ， 别 人 帮 我 记 心 上 。</p> 


<p lang="af"> 五 日 宽容 乐 </p> 
</div> 


(3) 将 所 有 lang 属性 值 为 af 的 p 元 素 的 字体 颜色 设置 为 红色 ， 字 体 大 小 为 30px，CSS 代 
码 如 下 : 


*[lang=af] { color:red; font-size:30px;} 
(4) 如 果 将 所 有 的 段落 字体 设置 为 蓝 色 ， 宽 度 为 400px，CSS 代码 如 下 : 


*{ Color:#06F; width:400px;} 


2.1.4 ”运行 结果 


打开 该 网 页 ， 效 果 如 图 2-1 所 示 。 


通用 选择 符 一 于 


2-1 通用 选择 符 


2.1.5 ”实例 分 析 


6 源码 解析 : 


该 案例 中 , 有 5 个 p 元 素 , 首先 将 所 有 lang 属性 值 为 af 的 pp 元 素 的 字体 大 小 设置 为 30px， 
字体 颜色 为 红色 ， 选 择 目标 元 素 的 代码 如 下 : 


*[lang=af] 


当然 ， 也 可 以 根据 标签 的 其 他 属性 来 进行 第 选 。 
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2.2 设置 表格 的 样式 


表格 的 样式 ， 如 表格 的 宽度 、 高 度 、 表 格 字 体 及 字体 颜色 等 这 些 可 设置 的 属性 ， 都 可 以 通 
过 使 用 标签 选择 符 来 设置 样式 。 这 个 小 节 主 要 讲解 关于 标签 选择 符 的 使 用 。 


入 视频 教学 : 光盘 /视频 /2/2.2 设置 表格 的 样式 avi 人 OO 长度: 5 分 名 


2.2.1 基础 知识 一 一 标签 选择 符 


HTML 页 面 中 的 标签 元 素 ， 如 td 元素 、 元素 等 ， 可 以 作为 标签 选择 符 来 使 用 。 标 签 选择 
符 的 语法 如 下 : 

element{} 

其 中 ，element 表示 可 选 的 标签 元 素 。 使 用 标签 选择 符 能 够 为 相同 的 标签 定义 不 同 的 样式 。 
例如 ， 下 面 实例 代码 : 


<p>p 元 素 一 </p> 
<p>p 元 素 二 </p> 
<div>div 元 素 </div> 


将 Pp 元 素 的 字体 颜色 设置 为 红色 ，CSS 代码 如 下 : 


p{ color:red;} 


2.2.2 ”实例 描述 


上 小 学 的 时 候 , 我 经 常会 在 语文 书 上 画 一 个 非常 显眼 的 表格 一 一 课程 表 ， 表格 里 面 有 红色 
字体 和 黑色 字体 ， 还 挺 好 看 。 下 面 的 这 个 例子 ， 就 以 表格 为 例 ， 讲 述 类 型 选择 符 的 使 用 。 


2.2.3 ”实例 应 用 


【 例 2-2】 设 置 表格 的 样式 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 leixing.html。 
(2) 在 页 面 中 制作 一 个 小 学 生 课程 表 ，HTML 代码 如 下 : 


<table width="433" height="165" border="1"> 
tr 
<td width="54"> 课 程 表 </td> 
<td width="70"> 星 期 一 </td> 
<td width="70"> 星 期 二 </td> 
<td width="57"> 星 期 三 </td> 
<td width="72"> 星 期 四 </td> 


和 
第 2 章 选择 符 | 。 


<tqd width="70"> 星 期 五 </td> 

Es 

过 在下 芝 
<td> 上 午 </td> 
<td> 语 文 /数学 </td> 
<td> 数 学 /语文 </td> 
<td name="red"> 微 机 课 </td> 
<td> 语 文 /数学 </td> 
<tq> 数 学 /语文 </td> 

</tr> 

<tr> 
<td> 下 午 </td> 
<td> 数 学 /语文 </td> 
<td> 语 文 / 数 学 </td> 
<td name="red"> 体 育 课 </td> 
<td> 数 学 /语文 </td> 
<td> 语 文 /数学 </td> 

</tr> 

</table> 


(3) 设置 表格 的 颜色 可 以 用 table 元 素 ， 也 可 以 直接 用 td 元 素 ， 这 里 用 的 是 td 元 素 ; 设置 
单元 格 的 字体 颜色 ， 可 以 使 用 td 元 素 ， 也 可 以 设置 指定 属性 的 td 元 素 的 样式 ，CSS 代码 如 下 : 

td{ background-color:#CC3;} 

body{ background-image:url (http imgload6.jpg); background-repeat:no-repeat;} 

table{ margin-left:130px; margin-top:150px;} 

td{ color:black;} 

td[name="red"] { color:red;} 


2.2.4 ”运行 结果 


打开 网 页 ， 效 果 如 图 2-2 所 示 。 


图 2-2 设置 表格 的 样式 


<@——— 


6ss ww 开发 学 习 实录 . 生 


2.2.5 ”实例 分 析 


上 源码 解析 : 


使 用 标签 选择 符 可 以 一 次 匹配 所 有 标签 的 样式 ， 但 是 却 无 法 为 每 个 标签 定义 独立 的 样式 。 
在 以 上 案例 中 ， 用 td 选择 符 设置 单元 格 的 字体 颜色 ， 会 将 所 有 的 单元 格 设置 为 同一 个 样式 。 
CSS 代码 如 下 : 


td{ background-color:#CC3;color:#06F;} 


如 果 要 设置 指定 单元 格 的 样式 ， 可 以 在 标签 选择 符 后 面 加 上 指定 元 素 的 属性 及 属性 值 ， 
CSS 代码 如 下 : 


td[name="red"]{ color:red;} 


2.3 ”实现 图 片 的 层 全 效果 


当 从 电脑 桌面 上 打开 多 个 窗口 时 ， 这 些 窗 口 会 层 车 到 一 起 ， 但 这 不 会 影响 查看 效果 。 因 为 
要 查看 的 窗口 始终 处 于 激活 状态 ， 且 它 的 层次 是 最 高 的 。 
本 小 节 将 讲解 如 何 用 ID 选择 符 实现 图 片 层 登 的 效果 。 


上 视频 教学 :光盘 /视频 /2/2.3 ， 实现 图 片 的 层 登 效果 avi 人 @@ 长 度 : 5 分 钟 


2.3.1 基础 知识 一 一 id 选择 符 

在 HTML 页 面 中 id 参数 指定 了 某 个 单一 元 素 ，id 选择 符 用 于 对 这 个 单一 元 素 定义 单独 的 
样式 。id 选择 符 的 语法 如 下 : 

#id{} 

和 类 选择 符 不 同 ，id 选择 符 通 常用 来 选择 一 个 特定 的 元 素 ， 而 非 一 组 元 素 。 为 了 通过 id 
选择 符 对 目标 元 素 的 引用 ， 为 id 添加 了 一 个 前 级 “#”。 

例如 ， 下 面 实例 代码 : 

<input id="txt" type="text" value="admin" /> 
使 用 id 选择 符 将 <input> 标 签 的 字体 颜色 设置 为 红色 ，CSS 代码 如 下 : 


#txt{ color:red;} 


2.3.2 ”实例 描述 


在 我 的 面试 经 历 中 ， 曾 经 有 一 个 经 理 面试 时 只 提 了 一 个 问题 ， 就 是 如 何 实现 层 登 效果 。 我 
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的 回答 是 用 绝对 定位 , 但 这 位 经 理 说 不 知道 什么 是 绝对 定位 , 你 就 告诉 我 你 怎么 实现 层 琶 效果 ， 

我 的 回答 还 是 用 绝对 定位 ， 用 position 属性 。 我 后 来 又 一 想 ， 用 position 属性 是 没 错 ， 但 是 实 

现 层 匡 效果 最 关键 的 是 z-index 属性 ， 单 纯 地 设置 position 属性 并 不 能 实现 层 倒 的 效果 …… 
好 了 ， 说 了 这 么 多 ， 就 是 为 下 面 的 这 个 例子 做 铺垫 ， 以 加 深 读 者 的 记忆 。 


2.3.3 ”实例 应 用 


【 例 2-3】 实 现 图 片 的 层 僵 效果 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 id.html。 
(2) 页 面 中 有 两 个 <div> 标 签 ，id 分 别 为 top-div、bottom-div。 在 每 个 <div> 标 签 中 分 别 杠 套 
一 个 图 片 ，HTML 代码 如 下 : 
<div id="top-div"> 
<img src="http imgload17.jpg" /> 
</div> 
<div id="bottom-div"> 
<img src="3.jpg" height="258"/> 
</div> 
(3) 现在 ， 要 实现 让 上 面 定 义 的 两 个 <div> 标 签 层 登 起 来 。 有 具体 为 : id 为 top-div 的 <div> 标 
签 在 下 面 ，id 为 bottom-div 的 <div> 标 签 在 上 面 。CSS 实现 代码 如 下 : 
#top-div{ background-color:#FCF; position:absolute; z-index:1;} 
#bottom-div{ background-color:#0CF; margin-top:200px; margin-left:80px; 
position:absolute; z-index:2; filter:alpha (opacity=40);} 


2.3.4 运行 结果 


打开 网 页 ， 效 果 如 图 2-3 所 示 。 


2-3 ”实现 层 倒 效果 


<@—— 


2.3.5 ”实例 分 析 


pe 


id 是 唯一 的 ， 用 “入 来 表示 id 选择 符 。 在 该 案例 中 创建 了 两 个 div 标签 ， 每 个 div 标签 
都 有 一 个 id。id 值 不 同 ， 因 此 也 说 明了 id 是 唯一 的 。 根 据 这 两 个 div 的 id 设置 各 自 的 CSS 样 
式 ， 即 它们 的 层 司 次 序 z-index 的 值 等 。 


2.4 克隆 div 元 素 


所 谓 克隆 div 元 素 ， 就 是 将 所 有 div 元 素 的 CSS 样式 设置 为 相同 。 本 节 以 class 选择 符 为 
主题 讲解 如 何 克 隆 div 元 素 。 


上 视频 教学 : 光盘 /视频 /2/2.4 克隆 div 元 素 avi 加 长 度 : 5 分 名 


2.4.1 ”基础 知识 一 一 class 选择 符 


class 选择 符 的 语法 如 下 : 

.ClassName{} 

其 中 ， 这 个 圆 点 是 英文 字符 “.”。 一 个 类 名 可 以 应 用 到 多 个 页 面 元 素 上 ， 当 然 一 个 页 面 元 
素 也 可 以 应 用 多 个 类 名 。 

参考 以 下 实例 : 

div.note{font-size:14px;} 

表示 所 有 class 属性 值 等 于 (包含 )“note” 的 div 对 象 字体 尺寸 为 14px。 


.dream{font-size:14px;} 


表示 所 有 class 属性 值 等 于 (包含 )“dream” 的 对 象 字体 尺寸 为 14px。 


2.4.2 ”实例 描述 


在 网 页 中 ， 经 常会 有 多 个 页 面 模块 使 用 同样 的 字体 、 字 号 、 颜 色 、 边 框 、 背 景 等 。 而 如 果 
为 每 一 个 页 面 模块 都 重复 定义 一 次 CSS 样式 ， 那 么 将 会 非常 的 费时 费力 。 

CSS 中 提供 了 一 个 为 同一 类 元 素 分 组 设置 样式 的 机 制 ， 那 就 是 class 选择 符 。 下 面 通过 一 
个 实例 来 看 一 下 class 选择 符 的 用 法 。 
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2.4.3 ”实例 应 用 


【 例 2-4】 克 隆 div 元 素 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 class.html。 
(2) 页 面 中 有 4 个 <div> 标 签 ， 并 且 都 引用 了 同一 个 类 名 ， 代 码 如 下 : 


<div class="div" id="divl"> 

莫 想 老 ， 常 思 少 ， 思 想 不 老 化 ， 衣 着 老 来 俏 。 不 拘 年 岁 行 辈 多 与 青年 人 交 朋 友 ， 萌 发 童心 有 奇效 ， 人 老 
心 不 老 ,黄昏 爱恋 讲 科学 ， 求 得 “第 二 青春 ”之 愉悦 。 

</div> 

<div class="div" id="div2"> 

知识 是 社会 的 宝贵 财富 ， 是 人 们 的 精神 食粮 。 多 看 书 、 常 读 报 既 增 见识 ， 长 才干 ， 又 驱 寂 宽 ， 益 身心 。 
</div> 

<div class="div” id="div3"> 

适度 的 体力 劳动 ， 可 使 五 脏 功能 得 到 锻炼 ， 减 组 衰老 。 实 践 证 明 劳 者 寿 。 

</div> 

<div class="div" id="div4"> 

鱼水 生存 ， 人 人 活着 ,我 为 人， 人 人 为 我 。 一 人 有 难 大 家 帮 ， 一 家 有 事 百 家 忙 ; 我 帮 别 人 要 忘却 ， 别 
人 帮 我 记 心 上 。 


</div> 


(3) 将 这 4 个 <div> 标 签 的 样式 设置 为 一 样 的 ， 而 它们 都 将 调用 类 名 为 div 的 CSS 样式 ， 
CSS 代码 如 下 : 


body{ background-image:url (http imgload6.jpg); background-repeat:no-repeat;} 
.div{ width:150px; height:150px; background-color:#FF9;float:left; margin-left:2px; 
border:#C3C 2px solid; margin-top:180px;} 


2.4.4 ”运行 结果 


在 浏览 器 中 打开 该 网 页 ， 效 果 如 图 2-4 所 示 。 


2-4 克隆 div 元 素 


<@—— 


2.4.5 ”实例 分 析 


6 源码 解析 : 


类 选择 符 可 以 应 用 于 多 个 页 面 元 素 ， 以 英文 圆 点 “.” 作 为 类 选择 符 ， 去 设置 页 面 元 素 的 样 
式 。 如 在 该 案例 中 ， 有 4 个 <div> 标 签 ， 将 类 名 为 div 的 样式 应 用 于 这 4 个 <div> 标 签 上 。 代 码 
如 下 : 

.div{ width:150px;y height:150px; background-color:#FF9;float:left; margin-left:2px; 
border:#C3C 2px solid; margin-top:180px;} 


2.5 ”实现 动态 变色 的 效果 


所 谓 动态 变色 ， 就 是 当 鼠 标 移 上 去 时 改变 目标 元 素 的 背景 颜色 ， 鼠 标 移 下 来 就 会 变 回 目标 
元 素 原来 的 背景 色 。 在 这 个 小 节 中 ， 我 们 就 一 起 来 实现 动态 变色 的 效果 ， 顺 便 学 习 什么 是 伪 类 
及 伪 元 素 选 择 符 。 


ce 视频 教学 : 光盘 /视频 /2/2.5 ”实现 动态 变色 的 效果 .avi 全 长 度 : 5 分 钟 


2.5.1 基础 知识 一 一 伪 类 及 伪 元 素 选 择 符 


伪 类 选择 符 可 以 看 作 某 种 特殊 的 类 选择 符 ， 是 能 被 支持 CSS 的 浏览 器 自动 识别 的 特殊 选 
择 符 。 伪 类 选择 符 的 最 大 作用 就 是 可 以 对 链接 的 不 同 状态 定义 不 同 的 样式 效果 。 伪 类 选择 符 定 
义 的 样式 最 常 应 用 在 定位 锚 标 记 (<a>) 上 , 即 锚 的 伪 类 选择 符 。 它 表示 动态 链接 4 种 不 同 的 状态 : 
未 访问 的 链接 (link)、 己 访问 的 链接 (visited)、 激 活 链接 (active) 和 鼠标 停留 在 链接 上 (hover)。 

伪 类 选择 符 的 语法 如 下 (以 :link 伪 类 为 例 ): 

Selector:link{} 

伪 元 素 选择 符 的 语法 如 下 (以 :before 伪 元 素 为 例 ): 

Selector:before{} 


其 中 ， 参 数 Selector 表示 目标 元 素 ， 后 面 的 表示 伪 类 或 伪 元 素 。 


2.5.2 ”实例 描述 
伪 类 和 伪 元 素 选择 符 可 以 很 轻松 地 为 特定 元 素 添加 一 组 样式 ， 它 实现 了 以 前 必需 使 用 


JavaScript 配合 才能 够 显示 出 来 的 特殊 页 面 效 果 。 下 面 我 们 就 来 使 用 伪 类 和 伪 元 素 选择 符 实现 
一 个 鼠标 经 过 改变 样式 的 页 面 特 效 。 
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2.5.3 ”实例 应 用 


【 例 2-5】 实 现 动态 变色 的 效果 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 weileihtml。 
(2) 页 面 中 有 一 篇 散文 ， 代 码 如 下 : 


<div id="title div"> 

<h3> 花 开 的 声音 </h3> 
</div> 
<div id="main div"> 

<p> 抬 头 看 看 天 ， 我 无 奈 地 叹 口气 。 为 了 躲避 父母 的 轮番 篆 炸 ， 我 慌 称 要 去 参加 周末 辅导 班 。 现 在 的 
我 最 怕 果 在 家 里 ， 最 怕 看 到 爸爸 车 有 所 思 的 眼神 ， 还 有 妈妈 手 里 端 着 的 人 参 鸡 汤 。 骑 着 自行 车 ， 我 慢 无 
目的 地 和 逛 着 ， 我 也 不 知道 自己 想 干什么 。 去 找 她 吧 ! 她 是 谁 ? 我 也 不 知道 ， 她 在 网 上 ， 叫 花 开 的 声音 ， 
是 我 现在 唯一 的 朋友 。 抛 开 所 有 的 踪 轨 和 叮嘱 ， 我 又 来 到 了 “深蓝 色 ” 网 吧 。 

</p> 
<p> 
你 愿意 振作 起 来 ， 去 实现 自己 的 梦想 吗 ? 我 的 明天 是 蓝 色 的 ， 因 为 是 我 自己 选 的 ， 所 以 不 管 它 是 

什么 样子 ， 对 我 来 说 都 是 最 美的 。 你 为 你 的 明天 选 好 颜色 了 吗 ? 大 家 都 相信 你 ， 是 因为 他 们 爱 你 ， 因 为 
你 会 努力 。 我 也 相信 你 ， 因 为 你 是 “超人 ”。 

</p> 
</div> 
<p> 

把 信封 好 ， 我 感到 快乐 。 翻 开 厚 厚 的 习题 册 ， 我 又 开始 新 一 轮 英 语 自 测 。 最 后 的 成 绩 ”119 分 。 我 没 
有 灰心 ， 
下 一 次 会 更 好 。 这 时 妈妈 推 开 门 进 来 ，“ 喝 牛奶 吗 。” 我 点 点 头 ， 看 着 她 眼角 的 皱纹 说 : “谢谢 妈妈 。” 
我 用 眼神 
告诉 她 ----“ 我 会 努力 的 ! ” 
</p> 


(3) 鼠标 移 到 div 元 素 上 面 ， 将 改变 div 的 背景 色 和 鼠标 的 样式 ， 用 伪 类 选择 符 div:hover 
去 实现 它 ，CSS 代码 如 下 : 


body{ background-image:url (http imgload6.jpg); background-repeat:no-repeat;} 
div:hover{ background-color:#F96; cursor:pointer;} 

#title div { margin-left:200px; margin-top:100px; width:100px;} 

#main div{ width:600px; margin-left:50px; margin-top:20px;} 

p{ text-indent:2em} 


2.5.4 ”运行 结果 


在 浏览 器 中 打开 该 网 页 ， 效 果 如 图 2-5 所 示 。 


<@—— 


| 关 Wzhhewreb 开 发 成 芝 路 \SS\ 源 代码 \ 自 > 章 veilei 


请 本 天 | 大 fR 扩 对 委 沈 择 符 


把 信封 好 ， 我 感到 
119 分 。 我 没有 灰心 ， 下- 
眼角 的 雏 纹 说 ，* 谢 谢 旭 妈 。- 我 用 眼神 


图 2-5 页 面 动态 变色 前 
鼠标 移 到 文字 上 面 时 ， 改 变 文字 的 背景 颜色 ， 效 果 如 图 2-6 所 示 。 


伪 类 及 伪 对 鱼 选 择 符 


SO wayz\CsS\ 提 人民 轴 第 ? 重 weilei hal 
| 窗 收 要 天 拓 的 汉 及 仿 对 象 流 所 符 


把 信封 好 ， 我 感到 
119 分 。 我 没有 不 心 ， 下 - 1 
眼角 的 皱纹 说 ，" 谢 谢 妈妈 。" 我 用 


ti 


2-6 鼠标 移 上 去 


2.5.5 ”实例 分 析 


6 源码 解析 : 


该 案例 通过 讲解 伪 类 及 伪 元 素 选 择 符 来 实现 页 面 的 一 些 动态 效果 。 在 这 里 使 用 了 :hover 这 
个 伪 类 ， 实 现 了 鼠标 移 上 去 变色 ， 移 下 来 失色 的 动态 变色 效果 。 关 键 代码 如 下 : 


div:hover{ background-color:#F96; cursor:pointer;} 


sé) >> 


2.6 设置 统一 样式 


指定 将 页 面 中 不 同 的 元 素 设置 为 统一 样式 ， 例 如 设置 同样 的 背景 色 ， 设 置 同样 的 字体 及 字 
体 大 小 等 。 在 Web 开发 中 ， 页 面 中 的 元 素 很 多 ， 但 是 有 些 元 素 需 要 使 用 同一 个 样式 ， 那 么 我 
们 就 可 以 把 这 些 元 素 取出 来 ， 形 成 群 组 选择 符 并 设置 统一 样式 。 


上 视频 教学 : 光盘 /视频 /2/2.6 设置 统一 样式 .avi 外 长 度 : ;分钟 


2.6.1 基础 知识 一 一 群 组 选择 符 


将 同样 的 定义 应 用 于 多 个 选择 符 , 可 以 将 选择 符 以 逗号 分 隔 的 方式 并 为 组 。 基 本 语法 如 下 : 
El,E2,E3{} 
例如 ， 页 面 中 有 table 元 素 、div 元 素 和 a 元素 ， 代 码 如 下 : 
<table> 
<tr> 
<td></td> 
<td class="tdl"></td> 
<td></td> 
</tr> 
</table> 
<div><a href="#"> 海 底 世 界 </a></div> 


将 class 属性 值 为 “tdl1” 的 td 元 素 和 <div> 标 签 中 包含 的 a 元 素 的 字体 大 小 设置 为 14px， 
CSS 代码 如 下 : 


.tdl,div af font-size:14px;} 


2.6.2 ”实例 描述 


在 我 们 的 日 常生 活 中 ， 最 不 可 缺少 的 就 是 日 常用 品 了 ， 例 如 吃 的 、 用 的 等 。 

在 一 个 风 和 日 丽 的 星期 天 ， 我 和 朋友 去 得 超市 ， 里面 最 吸引 我 的 就 是 吃 的 东西 了 。 在 超市 
的 货架 上 ， 有 很 多 物品 有 着 同样 的 包装 ， 不 同 物品 也 有 着 同样 的 价格 。 

下 面 的 这 个 小 例子 ， 就 讲解 如 何 将 多 个 不 同 的 页 面 元 素 设 置 为 统一 样式 。 


2.6.3 ”实例 应 用 


【 例 2-6】 设 置 统一 样式 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 fenzu.html。 
(2) 页 面 中 有 一 个 表格 ， 用 于 存放 手机 的 相关 信息 ， 例 如 下 面 的 代码 : 


ET | 
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<TR> 

<TD height=30 bgcolor="#F3F7FA"> 手 机 品牌 : <font color="#FF0000">CECT</font> </TD> 
</TR> 
<TR> 

<TD height=30 bgcolor="#F3F7FA"> 手 机 型 号 : <font 
Color="#FF0000">V958</font></TD> 
</TR> 


(3) 如 上 代码 所 示 ， 设 置 <td> 标 签 、<a> 标 签 和 <input> 标 签 的 字体 颜色 和 边框 样式 等 ，CSS 
实现 代码 如 下 : 


td,td a,input{ color:#06F; font-size:14px; border:#9C3 solid lpx;} 


2.6.4 ”运行 结果 


在 浏览 器 中 打开 该 网 页 ， 效 果 如 图 2-7 所 示 。 
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2-7 ”设置 统一 样式 


2.6.5 ”实例 分 析 


应 源码 解析 : 


在 这 个 案例 中 ， 主 要 讲解 了 什么 是 群 组 选择 符 ， 如 何 使 用 群 组 选择 符 对 某 些 指定 的 标签 设 
置 统一 样式 。 例 如 在 该 案例 中 ， 设 置 <td> 标 签 和 <input> 标 签 的 边框 样式 、 字 体 颜 色 和 大 小 ， 关 
键 代码 如 下 : 


td,td a,input{ color:#06F; font-size:14px; border:#9C3 solid lpx;} 


sé?) >> 
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2.7 设置 div 中 包含 的 标签 样式 


在 Web 网 页 的 开发 过 程 中 , 要 想 整个 页 面 看 起 来 整齐 又 好 看 ， 常 常会 用 div 元 素 将 整个 页 
面 的 元 素 进行 布局 ， 例 如 在 一 个 div 标签 中 ， 可 以 赃 套 div 元 素 、p 元 素 、input 元 素 等 一 些 表 
单元 素 ， 也 可 以 使 用 包含 选择 符 来 设置 这 些 典 套 元 素 的 样式 。 


ce 视频 教学 : 光盘 /视频 /2/2.7 设置 div 中 包含 的 标签 样式 .avi 长 度 : 4 分 钟 


2.7.1 基础 知识 一 一 包含 选择 符 


包含 选择 符 用 于 获取 当前 元 素 的 指定 子 元 素 。 其 语法 如 下 : 
El E2{} 
参考 以 下 实例 : 
table td { font-size:14px; } 
表示 将 table 里 面 td 元 素 的 字体 大 小 设置 为 14px。 
div.sub a { font-size:]4px; } 
表示 将 class 属性 值 为 sub 的 div 元 素 下 的 a 元素 字体 大 小 设置 为 14px。 
与 包含 选择 符 作 用 一 样 的 就 是 子 对 象 选择 符 ， 子 对 象 选择 符 的 语法 如 下 : 
El>E2{} 
表示 E2 必须 是 El 的 直接 子 元 素 , 而 包含 选择 符 的 目标 元 素 则 只 需要 包含 当前 元 素 。 例如 下 面 
的 这 个 例子 。 


<div> 
<ul> 
<1i> </1i> 
</ul> 
<div> 


要 定义 的 样式 ， 用 包含 选择 符 实现 ， 代 码 如 下 : 
dT 

用 子 对 象 选择 符 实现 ， 代 码 如 下 : 

TT 


而 不 能 使 用 如 下 代码 : 


div>111.=…、} 


< 
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2.7.2 ”实例 描述 


包含 选择 符 可 以 选 定 某 个 容器 元 素 内 部 的 特定 子 元 素 ， 然 后 为 其 设置 CSS 样式 。 例 如 这 
里 我 们 要 将 一 个 div 中 的 超 链接 和 指定 页 面 元 素 设置 相应 的 CSS 样式 , 就 可 以 使 用 本 节 所 讲 的 
包含 选择 符 。 


2.7.3 ”实例 应 用 


【 例 2-7】 设 置 div 中 包含 的 标签 样式 
(1) 新 建 一 个 HTML 页 面 ， 名 称 为 baohan.html。 
(2) 页 面 中 有 一 个 div 元 素 ，div 里 面 嵌 套 了 两 个 input 元 素 和 两 个 a 元素， 设计 一 个 简单 
的 用 户 登录 界面 ， 其 实现 代码 如 下 : 
<div> 
用 户 名 : <input type="text" value="admin" /> 
RD 
<Dr /> 
密码 : <input type="password" value="admin" /> <a id="find" href="#"> 忘 了 密 
码 ? 请 单 击 这 里 </a> 
<br /> 
< 
<a id="sub"” href="#"> 提 交 </a> 
</div> 
(3) 为 <div> 标 签 里 面 的 不 同 元 素 设置 不 同 的 样式 , 例如 设置 不 同 的 字体 、 字 体 大 小 、 字 体 
颜色 或 者 外 边 距 ， 实 现代 码 如 下 : 


body{ background-image:url (http imgload6.jpg); background-repeat:no-repeat;} 


div{ margin-left:200px; margin-top:200px;} 

div #sub{color:#693; font-size:20px;} 

div input{ color:#03C;} 

div #find{ color:#96C; font-style:italic;font-size:20px;} 


2.7.4 ”运行 结果 


在 浏览 器 中 打开 该 网 页 ， 效 果 如 图 2-8 所 示 。 
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图 2-8 设置 div 中 包含 的 标签 样式 


2.7.5 ”实例 分 析 


应 源码 解析 : 


在 这 个 简单 的 登录 界面 中 ， 为 div 元 素 中 的 不 同 元 素 设置 不 同 的 CSS 样式 ， 例 如 将 id 为 
sub 的 a 元 素 的 字体 颜色 设置 为 #693， 字 体 大 小 设置 为 20px， 实 例 代 码 如 下 : 


div a{color:#693; font-size:20px;} 
2.8 常见 问题 解答 


2.8.1 CSS 中 的 包含 选择 符 与 子 对 象 选择 符 的 区 别 


| 请 问 CSS 中 的 包含 选择 符 与 子 对 象 选择 符 有 什么 区 别 ? 

CR 图 。 网 络 课堂 : http://bbs.itzen.com/thread-12332-1-1.html 
请 问 CSS 中 的 包含 选择 符 与 子 对 象 选择 符 有 什么 区 别 ? 
【解决 办 法 】 举 个 例子 : 


<div> 
<ul> 
< > </TE> 
</ul> 
<div> 


要 定义 的 样式 ， 用 包含 选择 符 ， 写 成 : 


ll 


<@—— 


没有 问题 。 

若 用 子 选择 符 ， 只 能 写成 : 

a da 
不 能 写成 : 

Loh 

因为 div 和 二 非 “ 父 子 关系 ”， 而 是 “ 祖 孙 关系 ”。 子 对 象 提供 了 更 精细 的 控制 ， 由 此 可 
见 包 含 选择 符 的 深度 和 广度 超过 子 对 象 选择 符 ;， 而 子 对 象 选择 符 的 针对 性 和 唯一 性 比 包含 
选择 符 强 。 


2.8.2 ”CSS 选择 符 问 题 


CSS 选择 符 问题 。 

网 络 课堂 : http://bbs.itzcn.com/thread-12333-1-1.html 

请 问 p#submit 是 什么 意思 ? 注意 我 说 的 p 与 #submit 之 间 没 空格 ? 
【解决 办 法 】p#submit 的 意思 是 : 


<p id="submit"> 我 是 例子 一 </p> 


p #submit 的 意思 是 : 


<p> 
<span id="submit"> 我 是 例子 二 </span> 
</p> 


这 两 种 用 法 的 区 别 是 : 第 一 个 是 指 id 属性 为 submit 的 p 标签 ， 第 二 个 是 指 p 标签 下 一 级 
的 id 属性 为 submit 的 元 素 。 


2.8.3 怎样 用 CSS 选取 表格 的 第 一 列 CSS 选择 符 
怎样 用 CSS 选取 表格 的 第 一 列 CSS 选择 符 ? 


网 络 课堂 : http://bbs.itzcn.com/thread-12334-1-1.html 
我 想 让 表格 的 第 一 列 右 对 齐 : 


<style type="text/css"> 

-Col 1 {text-align: right;} 

</style> 

<table> 

<tr><td class="col 1"> 第 一 列 </td><td> 第 二 列 </td></tr> 


<tr><td class="col_1"> 第 一 列 </td><td> 第 二 列 </td></tr> 
<tr><td class="col_1"> 第 一 列 </td><td> 第 二 列 </td></tr> 
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<tr><tqd class="col_1"> 第 一 列 </td><td> 第 二 列 </td></tr> 
<tr><tqd class="col_1"> 第 一 列 </td><td> 第 二 列 </td></tr> 
</table> 


但 是 如 果 表 格 行 数 很 多 ， 若 每 行 都 写 class="col_1"， 代 码 会 很 腔 肿 ， 有 其 他 合适 的 方 
法 吗 ? 

【解决 办 法 】 建 议 用 也 。 

<style type="text/css"> 

-m tb th{text-align:right;font-weight:normal;} 

</style> 

<table class="m tb"> 

<tr><th> 第 一 列 </th><td> 第 二 列 </td></tr> 

<tr><th> 第 一 列 </th><td> 第 二 列 </td></tr> 

<tr><th> 第 一 列 </th><td> 第 二 列 </td></tr> 

</table> 


1. 填空 题 

(1) 选择 页 面 中 的 所 有 标签 元 素 ， 除了 用 body 之 外 ， 还 可 以 使 用 

(2) 使 用 类 型 选择 符 来 设置 table 表格 的 字体 颜色 ， 代 码 是 

(3) id 选择 符 是 以 文档 目录 树 (DOM) 中 作为 对 象 的 唯一 标识 符 的 作为 选择 符 。 


(4) 使 用 能 够 为 相同 的 标记 定义 不 同 的 样式 。 
(5) 使 用 可 以 设置 多 个 不 同 元 素 的 样式 。 
2. 选择 题 
(1) 以 下 选项 属于 CSS 选择 符 。 
A. 超 文 本 标记 选择 符 B. id 选择 符 
C， 类 选择 符 D， 包含 选择 符 


(2) 在 Dreamweaver 中 ， 关 于 用 z-index 改变 层 的 次 序 ， 说 法 正确 的 是 
A.、z-index 的 值 越 大 ， 这 个 层 的 位 置 就 越 靠 上 
B. z-index 的 值 越 大 ， 这 个 层 的 位 置 就 越 靠 下 
C.z-index 的 值 越 大 ， 这 个 层 的 位 置 就 越 靠 中 央 
D. 以 上 说 法 都 错 


(3) 下 列 选项 是 群 组 选择 符 的 语法 。 

A. ElE2{} B. ElE2{} C. El>E2{} 1: 类 村 
(4) 以 下 选项 是 伪 类 选择 符 。 

A. .class B. #id C. #da D. #id:hover 
(5) 下 列 选项 是 包含 选择 符 。 


< 
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A. ElE2{} B. ELE2{} C. El>E2{} D. *{} 
3. 上 机 练习 


上 机 练习 : 设置 一 个 表格 的 样式 
创建 一 个 表格 ， 并 设置 该 表格 的 样式 ， 效 果 如 图 2-9 所 示 。 


上 机 练习 - Windows Internet Ezplorer 


图 2-9 设置 表格 的 样式 
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内 容 摘要 : 

伪 类 可 以 看 做 是 一 种 特殊 的 类 选择 符 ， 是 能 被 支持 CSS 的 浏览 器 自动 识别 的 特殊 选择 符 ， 
也 就 是 不 用 再 使 用 class 或 id 调用 就 可 以 直接 使 用 的 ， 它 的 最 大 用 处 就 是 可 以 对 链接 定义 不 同 
状态 下 的 样式 效果 。 

CSS 中 伪 元 素 的 作用 也 是 如 此 ， 它 可 以 将 特殊 的 效果 添加 到 某 些 选择 符 。 

在 本 章 中 我 们 将 会 详细 讲解 每 一 个 CSS 伪 类 和 伪 元 素 的 用 法 ， 并 结合 实际 案例 帮助 读者 
快速 掌握 。 

学 习 目标 : 


掌握 链接 伪 类 的 使 用 方法 

熟悉 :focus 伪 类 的 使 用 

了 解 :first-child 擅 类 的 使 用 

了 解 适用 于 @page 的 伪 类 

熟悉 :lang 伪 类 的 使 用 

了 解 :first-letter 伪 元 素 和 :first-line 伪 元 素 
了 解 :before 伪 元 素 和 :after 伪 元 素 


3.1 制作 多 彩 的 超 链接 


在 网 页 中 ， 默 认 的 文字 链接 样式 都 是 带 下 划 线 的 效果 ， 这 种 一 成 不 变 的 外 观 太 单 一 ， 也 不 
等 合 页 面 的 整体 效果 ，CSS 样式 可 以 改变 这 种 单一 形式 。 

通过 使 用 CSS 伪 类 ， 可 以 设置 文字 链接 在 不 同 状态 下 的 不 同样 式 显示 ， 例 如 文字 颜色 、 
样式 、 有 无 下 划 线 等 。 


8 视频 教学 : 光盘 /视频 13/3.1 制作 多 彩 的 起 链接 avi Ok 度 : 6 分 名 


3.1.1 基础 知识 一 一 链接 伪 类 


链接 伪 类 是 众多 CSS 伪 类 中 使 用 频率 最 多 的 ， 在 学 习 它 的 应 用 之 前 首先 来 了 解 一 下 伪 类 
的 基本 语法 。 
伪 类 语法 格式 如 下 : 


selector : pseudo-class {property: value} 


CSS 类 也 可 与 伪 类 搭配 使 用 ， 这 种 方式 的 语法 格式 如 下 : 

selector.class : pseudo-class {property: value} 

在 支持 CSS 的 浏览 器 中 ， 链 接 的 不 同 状 态 都 可 以 使 用 不 同 的 方式 显示 。 这 些 状态 包括 选 
择 状 态 、 已 被 访问 状态 、 未 被 访问 状态 和 鼠标 悬 停 状态 。 

例如 ， 下 面 的 实例 代码 : 


a:link {color: #FF0000} /* 未 访问 的 链接 */ 
a:visited {color: #00FF00} /* 已 访问 的 链接 */ 
a:hover {color: #FFOOFF} /* 鼠标 移动 到 链接 上 */ 
a:active {color: #0000FF} /* 选 定 的 链接 */ 


$ 在 CSS 定义 中 , a:hover 必须 置 于 a:link 和 a:visited 之 后 , 才 是 有 效 的 。 同时 , a:active 
提示 | 必须 置 于 a:hover 之 后 ， 才 是 有 效 的 。 


3.1.2 ”实例 描述 


在 浏览 网 页 时 ， 经 常 看 到 这 种 效果 : 网 页 中 的 文字 经 鼠标 触动 ， 显 示 的 样式 各 不 相同 ， 而 
且 显 得 很 符合 整体 页 面 的 风格 ， 效 果 非 常 酷 。 

其 实 ， 通 过 使 用 CSS 伪 类 ， 很 容易 实现 文字 链接 在 不 同 状态 下 的 不 同样 式 显示 。 例 如 文 
字 大 小 、 有 无 边框 或 者 下 划 线 等 。 下 面 学 习 如 何 使 用 CSS 制作 多 彩 文字 链接 。 


ea) >> 
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3.1.3 ”实例 应 用 


【 例 3-1】 制 作 多 彩 的 超 链 接 

(1) 新建 一 个 HIML 页 面 ， 并 添加 一 张 背景 图 片 。 

(2) 在 页 面 中 添加 如 下 的 一 行 代 码 来 创建 一 个 hl 元 素 ， 并 包含 一 个 超 链接 。 

<h1><a href="#"> 小 学 教育 </a></h1> 

(3) 接 下 来 为 这 个 超 链接 定义 样式 ， 首 先是 未 被 访问 过 时 的 链接 状态 。 这 些 CSS 样式 代码 
如 下 所 示 : 

By aslink 


color: #FF0000 
} 


(4) 定义 被 访问 过 时 的 链接 样式 。 
hl a:visited { 


color: #00FF00 
} 


(5) 定义 鼠标 移 到 链接 上 时 样式 。 
hl a:hover { 


color: #FFOOFF 
} 


(6) 接 下 来 定义 鼠标 在 链接 上 按 下 时 的 样式 。 
hl a:active { 


color: #0000FF 
上 


(7) 接 上 方 的 hl 元素 ， 这 里 再 添加 一 个 列表。 


<ul class="main"> 
<1i><a href="#"> 数 学 (2398)</a></1i> 
<1i><a href="#"> 语 文 (2043)</a></1i> 
<li><a href="#"> 英 语 (1817)</a></1i> 
<1i><a href="#"> 奥 数 (2491)</a></1i> 
<1li><a href="#"> 作 文 (36) </a></1i> 
<li><a href="#"> 科 学 (1048) </a></1i> 

</ul> 


(8) 为 了 更 好 地 掌握 链接 伪 类 的 用 法 。 下 面 为 ul 列表 中 的 链接 定义 样式 ， 首 先是 链接 的 通 
用 样式 ， 这 包括 宽度 、 对 齐 方式 、 字 体 颜 色 、 是 否 有 下 划 线 以 及 显示 位 置 等 ， 最 终 如 下 所 示 : 


.main liaf 


color: black; 
text-decoration: none; 
padding-left: 20px; 


<@—— 
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display: block; 
display: inline-block; 
width: 100px; 
padding-top: 3px; 
padding-bottom: 3px; 
text-align: lefts; 


(9) 然后 遵循 为 hl 中 链接 定义 样式 的 先后 顺序 ， 依 次 编写 :link、 


个 CSS 样式 ， 这 部 分 代码 如 下 所 示 : 


-main 1i a:link { 
font-size: 14px; 
color: #A34B33; 
text-decoration: none; 
font-weight: bold; 


.main li a:visited { 
font-size: 14px; 

color: #FF66CC; 
text-decoration: overline; 


.main li a:hover { 

font-size: 14px; 

color: #000000; 
text-decoration: overline; 


.main li a:active { 
font-size: 14px; 
color: #6633CC; 
text-decoration: line-through; 


} 


(10) 保存 对 HTML 页 面 的 修改 ， 完 成 样式 的 定义 。 


3.1.4 ”运行 结果 


:visited、:hover 和 :active 4 


在 浏览 器 中 直接 打开 实例 HTML 文件 ， 会 先 看 到 hl 中 链接 的 默认 效果 ， 如 图 3-1 所 示 ， 


它 是 由 “hl a:link” 来 定义 的 。 


» EX 03) 
SD) 
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作文 《3267 

有 ao 


3-1 默认 h1 的 链接 效果 
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把 鼠标 移 到 其 中 的 文字 上 ， 查 看 由 “hl a:hover” 样 式 定义 的 效果 ， 如 图 3-2 所 示 。 现 在 ， 
按 下 鼠标 查看 “hl a:active” 样 式 定 义 的 效果 ， 如 图 3-3 所 示 。 


抽 作 才 彩 网 起 连作 一 Windowz Inter 
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图 3-2 移 到 h1 上 时 的 链接 效果 图 3-3 按 下 h1 时 的 链接 效果 


下 面 ,看 看 对 ul 列表 中 链接 定义 的 CSS 样式 是 否 有 效果 。 如 图 3-4 所 示 为 “ .main li a:hover” 
样式 移 到 上 面 时 的 效果 ， 图 3-5 所 示 为 “.main li a:active” 中 定义 的 被 按 下 时 的 效果 。 
ER | (GO. Be 
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图 3-4 移 到 列表 中 链接 上 时 的 效果 图 3-5 按 下 列表 中 链接 时 的 效果 


3.1.5 ”实例 分 析 


应 源码 解析 : 


在 本 实例 中 ， 不 仅 为 hl 元 素 定义 了 各 种 链接 状态 时 的 显示 样式 。 还 可 以 通过 选择 符 的 组 
合 ， 为 由 列 表 中 的 每 个 链接 定义 样式 。 

在 这 样 的 链接 伪 类 中 可 以 使 用 任意 有 效 的 CSS 样式 修饰 链接 。 唯 一 需要 注意 的 是 出 现 的 
顺序 ， 必 须 遵 循 “a:link 一 a:visited 一 a:hover 一 aiactive” 顺 序 ， 否 则 就 会 显示 样式 无 效 ， 或 者 不 
能 达到 预期 的 效果 。 


< 人 mm 


ks ww 开发 学 习 实录 . 生 


3.2 ”高 亮 显示 输入 元 素 的 登录 表单 


注册 用 户 时 ， 用 鼠标 单 击 输入 用 户 名 的 “文本 框 ” 时 ,该 “文本 框 ” 背 景 样式 的 显示 与 其 
他 文本 内 容 的 样式 不 同 ， 当 浏览 新 闻 时 ， 用 鼠标 单 击 新 闻 标题 新闻 标题 与 其 他 的 内 容 有 很 大 
的 差别 ， 而 鼠标 离开 ， 新 闻 标 题 则 恢复 正常 。 这 样 的 效果 就 称 为 “高 亮 显示 ”。 

相 比 之 下 ， 这 些 效果 有 没有 吸引 我 们 的 注意 呢 ? 


人 视频 教学 : 光盘 /视频 /3/3.2 ”高 亮 显示 输入 元 素 的 登录 表单 .avi 人 长 度 : 5 分 名 


3.2.1 基础 知识 一 一 :focus 伪 类 


:focus 伪 类 用 来 设置 对 象 在 成 为 输入 焦点 ， 即 触发 该 对 象 onfocus 事件 发 生 时 的 样式 。 该 
伪 类 的 语法 如 下 : 

Selector : focus { sRules } 

例如 ， 下 面 的 样式 代码 定义 了 链接 成 为 焦点 以 及 带 图 片 链接 成 为 焦点 时 的 样式 。 


a:focus { font-size: 1l4pt; text-decoration: underline; color: blue; } 
a:focus img { border: thin solid green } 


3.2.2 ”实例 描述 


时 文本 框 的 样式 恢复 到 原来 的 样式 。 这 个 效果 用 JavaScript 代码 可 以 很 容易 地 实现 ， 但 还 有 没 
有 其 他 方法 可 以 实现 呢 ? 答案 是 肯定 的 。 
那 就 是 使 用 本 节 介 绍 的 :focus 伪 类 来 实现 ， 下 面 介绍 它 在 登录 表单 中 的 应 用 吧 。 


3.2.3 ”实例 应 用 


【 例 3-2】 高 亮 显示 输入 元 素 的 登录 表单 
(1) 新 建 一 个 HTML 页 面 ， 命 名 为 login.html。 
(2) 在 页 面 中 添加 一 个 4 行 2 列 的 表格 。 
(3) 为 表格 填充 内 容 ， 使 其 成 为 一 个 包含 用 户 名 文本 框 、 密 码 文本 框 和 “登录 ”按钮 的 表 
单 。 代 码 如 下 所 示 : 
<table> 
区 外 人 R 


<td colspan="2" align="center"> 管 理 员 登录 </td> 
</tr> 
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<tr> 

<td> 用 户 名 : </td> 

<td><input name="username" type="text" size="20" /></td> 
</tr> 
<tr> 

<td> 密 gnbsp; gnbsp; &nbsp; gnbsp; 码 : </td> 

<td><input name="userpass" type="password" size="22" /></td> 
</tr> 
<tr> 

<td colspan="2" align="center"><input type="submit" value=" 登 录 "” /></td> 
</tr> 

</table> 


(4) 在 页 面 中 用 CSS 的 :focus 伪 类 来 定义 上 述 表 单 中 input 元 素 被 触发 时 的 样式 。 这 里 仅仅 
是 修改 了 背景 颜色 ， 使 其 突出 显示 ， 代 码 如 下 所 示 : 


input:focus { 
background-color:#6F3; 


} 
(5) 保存 对 HIML 页 面 的 修改 ， 完 成 样式 的 定义 。 


3.2.4 ”运行 结果 


在 浏览 器 中 直接 打开 login.html 文件 ， 会 看 到 默认 的 效果 如 图 3-6 所 示 。 


图 E VmhasaWYeo 开 发 成 功 之 驻 \SS\ 避 代码 \VLogin_html x 


-Do 


图 3-6 ”默认 效果 


此 时 由 于 没有 任何 一 个 输入 元 素 被 激活 ， 所 以 看 不 出 效果 。 用 鼠标 单 击 “ 用 户 名 ”的 文本 
框 时 ， 效 果 如 图 3-7 所 示 ， 可 以 看 到 该 文本 框 显示 了 在 “input:focus” 中 定义 的 背景 颜色 。 
如 果 单 击 “ 登 录 ” 按 钮 ， 也 可 以 看 到 效果 ， 如 图 3-8 所 示 。 


<@— 


图 3-7 输入 用 户 名 时 效果 图 3-8 单 击 按钮 时 效果 


3.2.5 ”实例 分 析 


让 源码 解析 : 


通过 本 实例 的 制作 ， 可 以 看 到 使 用 :focus 伪 类 可 以 很 简单 地 为 鼠标 当前 激活 的 元 素 定义 显 
但 是 在 使 用 时 要 注意 , 该 伪 类 不 支持 Internet Explorer 8 之 前 的 版 本 ， 且 在 Internet Explorer 
8 中 使 用 时 必须 已 经 定义 了 IDOCTYPE 元 素 ， 否 则 无 效 。 其 他 浏览 器 都 支持 ， 无 此 问题 。 


3.3 ”为首 个 子 对 象 定义 样式 


如 果 想 要 展示 一 组 美观 大 方 、 样 式 统一 的 数据 。 你 可 能 会 说 : 先 定义 好 一 个 样式 ， 然 后 用 
class 调用 , 那么 有 没有 更 简单 , 更 方便 的 方法 呢 ? 肯定 有 , 那 就 是 要 为 首 个 子 对 象 定义 样式 了 。 

首 个 子 对 象 就 是 指 某 个 元 素 下 的 第 一 个 元 素 , 例如 , 在 代码 “<div><p></p><ul></li></div>” 
中 ，“<p></p>” 为 <div> 下 的 第 一 个 元 素 。 


上 视频 教学 : 光盘 /视频 /313.3 “为首 个 子 对象 定 义 样式 .avi @ 度 : 5 分 名 


3.3.1 基础 知识 一 一 :first-child 伪 类 


:first-child 伪 类 用 来 设置 指定 页 面 元 素 中 第 一 个 子 对 象 的 样式 。 该 伪 类 的 语法 格式 如 下 : 
Selector : first-child { sRules } 


:first-child 是 一 个 很 特殊 的 伪 类 ， 很 容易 遭 到 误解 ， 所 以 有 必要 举例 来 说 明 。 考 虑 以 下 
元 素 : 


me 人) >> 
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<div> 
<p> 栏 目 列表 </p> 
<ul> 
<1i>CSS 基础 </1i> 
<1i>css 框 模型 <strong> 最 新 </strong></1i> 
<1i>CSss 定位 </1i> 
</ul> 
<p> 你 也 可 以 单 击 <em> 添 加 </em> 按 钮 ， 向 网 站 中 添加 新 内 容 。.</p> 


</div> 
在 上 面 的 例子 中 ， 作 为 第 一 个 元 素 的 元 素 包括 第 一 个 p、 第 一 个 i、strong 和 em 元 素 。 

给 定 以 下 样式 规则 : 

p:first-child {font-weight: bold;} 

li:first-child {color:red;} 

第 一 个 规则 将 作为 某 元 素 第 一 个 子 元 素 的 所 有 p 元 素 设置 为 粗 体 。 第 二 个 规则 将 作为 某 个 
元 素 (在 HIML 中 ， 这 肯定 是 ol 或 ul 元 素 ) 第 一 个 子 元 素 的 所 有 上 元 素 变 成 红色 。 
人 @@ | 设 常 见 的 错误 是 认为 pifirstchild 之 类 的 选择 器 会 选择 元 素 的 第 一 个 子 元 素 。 


注意 


3.3.2 ”实例 描述 


在 使 用 传统 的 CSS 时， 都 是 用 类 样式 或 者 id 选择 器 来 定义 一 个 样式 。 
在 掌握 了 :first-clid 伪 类 之 后 ， 可 以 利用 它 来 设置 样式 ， 从 而 避免 在 很 多 类 似 的 代码 中 频繁 
地 调用 “class” 或 者 “id”， 使 代码 更 简洁 。 


3.3.3 ”实例 应 用 


【 例 3-3】 为 首 个 子 对 象 定义 样式 
(1) 新 建 一 个 HTML 页 面 ， 命 名 为 first-child.html。 
(2) 在 页 面 中 添加 一 些 布局 代码 ， 并 注意 它们 的 层次 结构 。 例 如 ， 在 本 实例 中 使 用 如 下 代 
码 制 作 了 一 个 简单 的 课程 列表 。 
<div> 
<p> 窗 内 网 css 课程 视频 列表 </p> 
<ul> 
<1li>css 基础 </1i> 
<li>css 模型 </1i> 
<1li>css 定位 </1i> 
</ul> 


<ul> 
<1i>css 选择 符 </1i> 


<@—= 
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<1li>css 属性 </1i> 
<1li>css 伪 类 </1i> 
</ul> 
<p> 要 了 解 更 多 有 关 css 的 资料 ， 可 以 到 <b> 窗 内 网 </b>。</p> 
<div> 
<p> 版 权 所 有 &copy; itzcn.com</p> 
</div> 
</div> 


(3) 在 这 个 课程 列表 中 共 出 现 了 3 个 p 元素 ,利用 :first-child 伪 类 定义 p 元 素 第 一 次 出 现时 
的 样式 ， 这 里 为 加 粗 、 红 色 ， 代 码 如 下 所 示 : 
pirst child 
font-weight: bold; 


color:red; 


} 
(4) 利用 :first-child 伪 类 定义 列表 中 元素 第 一 次 出 现时 的 样式 ， 代 码 如 下 所 示 : 


lisFirst=chilad t 
text-transform:uppercase; 
color:#00F 

} 


(5) 保存 对 HTML 页 面 的 修改 ， 完 成 样式 的 定义 。 


3.3.4 ”运行 结果 


在 浏览 器 中 直接 打开 first-child.html 文件 查看 运行 效果 ， 如 图 3-9 所 示 。 
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3-9 运行 效果 


sé >> 


3.3.5 ”实例 分 析 


让 源码 解析 : 


通过 本 实例 ， 相 信 读 者 对 :first-child 伪 类 的 使 用 有 了 进一步 的 认识 。 

但 需要 注意 的 是 ，:first-child 伪 类 仅 会 作用 到 同一 层次 的 第 一 个 对 象 上 。 例如， 在 本 实例 
中 ， 有 虽然 世 元 素 出 现 了 6 次 ， 但 由 于 有 两 个 由 列表 。 所 以 ， 在 每 个 蔬 列表 中 第 一 次 出 现 开 元 
素 时 将 应 用 “li:first-child” 样 式 。 

对 于 pp 元素 的 应 用 也 是 同 理 ， 有 两 个 p 元 素 在 同一 个 div 内 ， 因 此 只 有 第 一 次 出 现时 将 应 
用 “p:first-child” 样 式 。 


3.4 设置 HTML 页 面 的 打印 尺寸 


为 了 精确 控制 HTML 页 面 的 外 观 ，CSS 不 仅 提供 了 在 浏览 器 上 显示 的 伪 类 ， 还 可 以 通 
过 :first 伪 类 、:right 伪 类 和 :left 伪 类 来 设置 打印 的 尺寸 。 
下 面 ， 我 们 就 一 起 来 了 解 一 下 吧 。 


入 视频 教学 : 光盘 /视频 /3/3.4 设置 HTML 页 面 的 打印 尺寸 avi @ 长 度 : 5 分 名 


3.4.1 基础 知识 一 一 :first 伪 类 、:right 伪 类 和 :left 伪 类 


在 CSS 中 提供 了 3 个 可 适用 于 @page 规则 的 伪 类 ， 分 别 是 :first、:right 和 :left。 
®@ :first 
:first 伪 类 用 于 设置 页 面容 器 第 一 页 使 用 的 样式 ， 语 法 格式 如 下 : 
Selectoro Tirst Ispaulesol 
例如 : 
epage :first { margin: 4cm } 
® :right 
:right 伪 类 用 来 设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 , 语法 格式 如 下 : 
Selector : right { sRules } 
例如 : 
epage :right { margin: 4cm } 
@@ :left 
:left 伪 类 用 来 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 ， 语 法 格式 如 下 : 


Selector : left { sRules } 
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例如 : 


@page :left { margin: 4cm } 


3.4.2 ”实例 描述 


在 网 上 冲浪 时 ， 经 常会 使 用 搜索 引擎 来 查找 自己 比较 感 兴趣 的 内 容 。 在 找到 之 后 ， 就 会 将 
它 加 入 收藏 夹 ， 方 便 下 次 查看 。 
如 果 这 些 内 容 是 资料 性 的 ， 可 能 希望 将 它 打 印 出 来 。 此 时 ， 便 会 发 现 原 本 在 HTML 页 面 
中 正常 显示 的 内 容 ， 打 印 出 来 之 后 发 生 了 变化 。 这 是 由 于 打印 的 尺寸 与 显示 尺寸 不 匹配 所 导 
致 的 。 

解决 的 办 法 是 利用 CSS 中 为 @page 规则 提供 的 伪 类 来 设置 HTML 页 面 的 打印 尺寸 。 


3.4.3 ”实例 应 用 


【 例 3-4】 设 置 HTML 页 面 的 打印 尺寸 
(1) 打开 一 个 已 存在 的 HTML 页 面 ， 图 3-10 所 示 为 本 实例 中 使 用 的 页 面 。 
(2) 添加 CSS 样式 , 首先 利用 :first 伪 类 来 设置 打印 时 第 一 页 的 样式 。 这 里 为 外 间距 4 厘米 ， 
代码 如 下 所 示 : 
@page :first { 


margin:4cm; 


} 
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3-10 ”打开 要 设置 的 HTML 页 面 
(3) 定义 页 面 打印 时 左边 的 样式 : 


Qpage :left { 
margin:4cm; 
| 


(4) 定义 页 面 打 印 时 右边 的 样式 : 


@page :right { 
margin: 4cm; 


| 
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(5) 保存 对 HIML 页面 的 修改 ， 完 成 实例 的 制作 。 


3.4.4 ”运行 结果 


在 浏览 器 中 打开 已 设置 打印 样式 的 页 面 ， 然 后 右 击 选择 【打印 预览 】 命 令 查 看 打印 预览 后 
的 效果 ， 也 可 以 调整 样式 的 值 观察 变化 。 
图 3-11 所 示 为 未 应 用 样式 前 的 打印 预览 效果 ， 添 加 样式 之 后 的 效果 如 图 3-12 所 示 。 
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图 3-12 ”应 用 样式 后 的 打印 预览 效果 


3.4.5 ”实例 分 析 


Saw 


对 比 图 3-11 和 图 3-12 的 运行 效果 ， 可 以 看 到 在 未 应 用 打印 样式 之 前 ， 页 面 可 以 完整 地 预 
览 ， 而且 顶部 、 左 边 和 右边 的 间距 都 相同 。 

应 用 打印 样式 之 后 ， 页 面 的 间距 增 大 ， 致 使 页 面 的 内 容 被 挤 出 打印 范围 ,显示 不 完整 了 。 

总 的 来 说 ，:first 伪 类 、:right 伪 类 和 :left 擅 类 在 实际 开发 时 很 少 使 用 ， 但 是 在 某 些 情 况 下 
可 以 巧妙 地 解决 打印 问题 。 


<@—— 


6ss ww 开发 学 习 实 录 . 生 


3.5 ”修饰 文字 的 特殊 样式 


如 果 想 把 书 名 号 (《》) 修 改 为 引号 (“”)， 为 了 能 引起 浏览 者 的 注意 ， 使 引号 中 的 内 容 高 
亮 显 示 ， 该 如 何 实现 呢 ? 

要 使 引号 中 的 内 容 高 亮 显示 ， 可 以 根据 以 前 学 过 的 “内 岩 样式 表 ”、“ 类 选择 器 ”、“id 
选择 器 ”来 定义 内 容 的 样式 。 但 是 如 果 想 要 修改 “特殊 语言 字符 的 类 型 ”, 直接 进行 文本 修改 ， 
既 耗 时 ， 又 费 神 ， 有 没有 一 种 方法 一 举 两 得 呢 ? 

别 急 ! 待 我 们 说 完 :lang 伪 类 再 回来 研究 。 


上 视频 教学 : 光盘 /视频 /3/3.5 修饰 文字 的 特殊 样式 avi @k 度 : ;分钟 


3.5.1 基础 知识 一 一 :lang 伪 类 


:lang 伪 类 用 来 设置 使 用 特殊 语言 的 内 容 的 样式 ， 语 法 格式 如 下 : 
Selector : lang { sRules } 
例如 ， 在 下 面 的 例子 中 ，:lang 伪 类 为 属性 值 为 no 的 q 元 素 定义 引号 的 类 型 。 


<html> 
<head> 
<style type="text/css"> 
q:lang (no) 
{ 
uotess mm" "men 
， 
</style> 
</head> 
<body> 
<p> 文 字 <q lang="no"> 段 落 中 的 引用 的 文字 </q> 文 字 </p> 
</body> 
</html> 


执行 后 ， 在 浏览 器 中 看 到 如 图 3-13 所 示 的 效果 。 


EC oements snd Settines Wininistrator\ 而 \Wntitled1 Mal 


突 收 藏 关 | 疙 CWDocments md Se 和食 "上 国 - 吕 时 - 页 面 和 D> 


文字 "段落 中 的 引用 的 文字 文字 


图 3-13 ”实例 运行 效果 
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3.5.2 ”实例 描述 


在 看 文章 时 有 可 能 遇 到 类 似 “ 文 章 内 容 ~ 段落 中 的 引用 ~ 文章 内 容 ” 这 样 的 文本 。 若 想 要 
改变 “~ 段落 中 的 引用 ~” 中 的 特殊 字符 的 类 型 ， 但 又 不 想 在 文本 中 直接 修改 ， 可 以 使 用 :lang 
伪 类 来 巧妙 地 解决 ， 只 需 简单 地 修改 一 下 样式 的 类 型 就 可 以 了 。 


3.5.3 ”实例 应 用 


【 例 3-5】 修 饰 文字 的 特殊 样式 
(1) 新 建 一 个 HTML 页 面 ， 命 名 为 lang.html。 
(2) 在 页 面 中 添加 CSS 样式 ， 利 用 :lang 伪 类 来 修饰 标题 的 样式 。 


q:lang(bt) { 
QOEes Y= i JT 下 


(3) 添加 用 于 修饰 备注 文本 的 CSS 样式 。 


dq:lang(bz) { 


quotes:nmsm mm 
color:blue; 


} 
(4) 添加 一 个 CSS 样式 来 修饰 文章 中 的 段落 。 


q:lang(dl) { 
gquotes:"[" "]" 


} 
(5) 添加 一 个 用 来 修饰 文章 中 附加 信息 的 CSS 样式 。 


dq:lang(no) { 
eo 2 hh os 
color:red; 


} 


(6) 通过 上 面 的 步骤 , 创建 了 4 个 修饰 样式 。 这 一 步 需要 在 body 元 素 中 添加 具体 的 文章 内 
容 并 引用 上 面 定 义 的 样式 。 代 码 如 下 所 示 : 

<div id="wrap"> 

<p><q lang="bt"> 海 燕 </q></p> 

<p><q lang="bt"> 高 尔 基 </q><q lang="bz"> 玛 克 西 姆 . 高 尔 基 </q></p> 

<p><q lang="dl">1</q> 在 苑 茫 的 大 海上 ， 狂 风 卷 集 着 乌云 。 在 乌云 和 大 海 之 间 ， 海 燕 像 黑色 的 闪 
电 ， 在 高 傲 地 飞翔 。</p> 

<p><q lang="dl">2</q> 一 会 儿 翅膀 碰 着 波浪 ， 一 会 儿 箭 一 般 地 直 冲 向 乌云 ， 它 叫喊 着 一 一 就 在 这 
鸟 儿 勇 敢 的 叫喊 声 里 ， 乌 云 听 出 了 欢乐 。</p> 


<E@——— 


<p><q lang="d1">3</q> 在 这 叫喊 声 里 一 一 充满 着 对 暴风 雨 的 渴望 ! 在 这 叫喊 声 里 ， 乌 云 听 出 了 愤 
怒 的 力量 、 热 情 的 火焰 和 胜利 的 信心 。</p> 

p> 后 面 省 略 </p> 

<p> 作 者 代表 作品 <q lang="no"> 海 燕 之 歌 </q>、<q lang="no"> 童 年 </q>、<q lang="no"> 
在 人 间 </q>、<q lang="no"> 我 的 大 学 </q> </p> 


</div> 


(7) 保存 对 HTML 页 面 的 修改 ， 完 成 实例 的 制作 。 
3.5.4 运行 结果 
在 浏览 器 中 打开 lang.html 文件 查看 运行 效果 ， 如 图 3-14 所 示 。 
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云 

由 这 全 生生。 

国 一 言 儿 起 障 袜 着 六 涩 ， 一 全 儿 向 一 圾 地 直 溃 总 云 ， 

定员 昭 着 一 就 在 这 乌 儿 肖 到 的 lM 志 旦 ， 乌 了 折 出 了 从 


Us 则 喊 声 里 一 -充满 着 对 是 风 南 的 渴望 ! 在 这 名 碱 声 
全 和 热情 的 火 短 和 胜利 的 信心 。 


图 3-14 ”运行 效果 


3.5.5 ”实例 分 析 


6 源码 解析 : 


通过 本 实例 ， 我 们 看 到 在 不 修改 HTML 页 面 内容 结 构 的 情况 下 ， 实 现 对 特定 的 文字 显示 
特殊 样式 的 效果 。 

在 使 用 :lang 伪 类 时 ，q 元 素 表示 要 定义 的 引用 类 型 ， 在 这 里 可 以 改变 字符 的 呈现 样式 。 

但 是 要 注意 : 只 有 在 指定 了 !DOCTYPE 元 素 后 , 才能 在 IE8 或 者 更 高 版 本 里 看 到 这 个 伪 类 
起 的 作用 。 也 就 是 说 ， 这 个 伪 类 在 IE7 或 者 更 早 的 浏览 器 中 是 看 不 到 效果 的 。 


3.6 个 性 化 的 歌词 显示 页 


一 些 报纸 或 者 杂志 为 了 达到 版 面 上 某 个 栏目 突出 显示 的 效果 , 会 有 意 地 将 第 一 个 字 的 字号 
增 大 一 倍 或 者 将 第 一 行文 本 的 显示 与 其 他 行文 本 显示 设置 成 不 同 的 颜色 。 
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在 网 页 上 如 果 要 实现 这 种 效果 可 以 利用 :first-letter 伪 元 素 和 :first-line 伪 元 素 。 


A 
:视频 教学 : 光盘 /视频 /3/3.6 个 性 化 的 歌词 显示 页 .avi 人 长度 : 5 分 钟 


3.6.1 基础 知识 一 一 :first-letter 伪 元 素 和 :first-line 伪 元 素 
:first-letter 伪 元 素 用 于 向 文本 的 第 一 个 字母 添加 特殊 样式 ， 语 法 格式 如 下 : 


Selector : first-letter { sRules } 


例如 : 


Delirst-detter 
{ 
Color:#ff00007 
font-size:xx-large; 


} 
:first-line 伪 元 素 用 于 向 某 个 选择 器 中 的 文字 的 首 行 添加 特殊 样式 ， 语 法 格式 如 下 : 
Selector : first-line { sRules } 
例如 : 


p:first-line 

{ 
color:blue; 
font-size:18px; 


3.6.2 ”实例 描述 


前 面 介绍 了 伪 元 素 first-letter 和 first-line 的 知识 ， 是 不 是 感觉 很 简单 啊 。 下 面 通过 制作 个 
性 化 的 歌词 显示 页 面 看 看 它们 的 具体 应 用 ， 其 中 使 用 first-line 强调 歌曲 名 称 ， 使 用 first-letter 
突出 显示 歌词 的 第 一 个 字 。 


3.6.3 ”实例 应 用 


【 例 3-6】 个 性 化 的 歌词 显示 页 

(1) 新 建 一 个 HTML 页 面 ， 命 名 为 ningxia.html。 

(2) 在 页 面 中 添加 CSS 样式 。 首 先 利 用 :first-letter 伪 类 定义 一 个 修饰 首 字 符 的 样式 ， 代 码 
如 下 所 示 : 

stext:firot Letter 


Color:#FFF; 
font-size:36px; 


<@— 
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Eont-weight: bold; 
font-style: italic; 
text-decoration: underline; 


} 
(3) 再 利用 :first-line 伪 类 来 定义 一 个 修饰 首 行 的 样式 ， 代 码 如 下 所 示 : 


title:first-line { 
margin:0px; 
padding:0px; 
color:#006; 
font-size:24px; 
font-weight:bold; 
text-align:center; 


上 
(4) 接 下 来 在 body 元 素 中 添加 与 歌曲 相关 的 内 容 ， 包含 歌曲 名 称 、 歌 手 、 所 属 专辑 和 歌词 
正文 ， 并 引用 上 面 定义 的 样式 。 代 码 如 下 所 示 : 


<div id="wrap"> 
<p class="title"> 歌 曲 ， 宁 夏 <br /> 
专辑 ， 爱 的 大 游行 1ive 全 纪录 </p> 
<p class="text"> 宁 静 的 夏天 <br /> 
天 空中 繁星 点 点 <br /> 
心里 头 有 些 思念 <br /> 
思念 着 你 的 脸 <br /> 
我 可 以 假装 看 不 见 <br /> 
也 可 以 偷偷 地 想念 <br /> 
直到 让 我 摸 到 你 那 温暖 的 脸 <br /> 
知 了 也 睡 了 <br /> 
安心 地 睡 了 <br /> 
在 我 心里 面 宁静 的 夏天 <br /> 
那 是 个 宁静 的 夏天 <br /> 
你 来 到 宁夏 的 那 一 天 <br /> 
</p> 
</div> 


(5) 保存 对 HTML 页 面 的 修改 ， 完 成 实例 的 制作 。 


3.6.4 ”运行 结果 


在 浏览 器 中 打开 ningxia.html 文件 查看 运行 效果 ， 如 图 3-15 所 示 。 
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下 学 ” 郑 四 - 2 日 了 外- 可- 
nn 


图 3-15 运行 效果 


3.6.5 ”实例 分 析 


访 源码 解析 : 


通过 本 实例 ， 我 们 看 到 :first-letter 伪 元 素 和 :first-line 伪 元 素 的 使 用 并 不 复杂 ， 只 要 分 清 这 
两 个 伪 元 素 的 作用 范围 就 可 以 了 。 

最 后 需要 注意 的 是 : :first-letter 伪 元 素 和 :first-line 伪 元 素 都 只 能 作用 于 块 对 象 。 内 联 元 素 
要 使 用 该 属性 ， 必 须 先 设 定 对 象 的 height 或 width 属性 ， 或 者 设 定 position 属性 为 absolute，, 或 
者 设 定 display 属性 为 block。 


3.7 ”替换 指定 位 置 


大 家 都 知道 before 和 after 是 前 、 后 的 意思 。 但 是 奇怪 的 是 ，CSS 中 的 :before 伪 元 素 和 :after 
伪 元 素 是 为 源 文档 中 不 存在 的 内 容 设置 样式 的 。 

没有 内 容 怎么 设置 样式 呢 ? 别 急 ! 它们 有 一 个 content 属性 ， 一 起 使 用 就 可 以 为 某 个 选择 
器 前 、 后 的 内 容 设置 样式 了 。 

下 面 就 来 了 解 一 下 :before 伪 元 素 和 :after 伪 元 素 的 用 法 。 


上 视频 教学 : 光盘 /视频 /3/3.7 替换 指定 位 置 av @k 度 : 7 分 名 
3.7.1 基础 知识 一 一 :before 伪 元 素 和 :after 伪 元 素 


:before 用 来 和 content 属性 一 起 使 用 ， 设 置 在 对 象 之 前 (依据 对 象 树 的 逻辑 结构 ) 显 示 的 内 容 ， 


<@——= 
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语法 格式 如 下 : 
Selector : before { sRules } 
例如 : 


q:before { 
content: open-quote; 
color: red 


下 
:after 用 来 和 content 属性 一 起 使 用 , 设置 在 对 象 之 后 (依据 对 象 树 的 逻辑 结构 ) 显 示 的 内 容 ， 
语法 格式 如 下 : 
Selector : after { sRules } 


例如 : 


body:after { 
content: "The End"; 
display: block; 
margin-top: 2em; 
text-align: center; 


和 
从 语句 中 可 以 看 到 :before 和 :after 都 需要 与 content 属性 一 起 使 用 。 在 表 3-1 中 列 出 了 常用 
content 参数 名 称 及 说 明 。 
表 3-1 常用 content 参数 表 


参数 名 称 说 了 明 
attr(alt) : 使 用 alt 特性 的 文字 
counter(name 使 用 已 命名 的 计数 器 
counter(name, list-style-type, 使 用 已 命名 的 计数 器 并 遵从 指定 的 list-style-type 属性 
counters(name. string 使 用 所 有 已 命名 的 计数 器 
counters(name. string, list-style-type) 使 用 所 有 已 命名 的 计数 器 并 遵从 指定 的 list-style-type 属性 
Do-close-quote 不 插入 quotes 属性 的 后 元 素 。 但 增加 其 赚 套 级 
Do-open-quote 不 插入 quotes 属性 的 前 元 素 。 但 减少 其 媒 套 级 别 
close-quote 插入 quotes 属性 的 后 元 素 
open-quote 插入 quotes 属性 的 前 元 素 
string 使 用 引号 括 起 的 字符 串 
url 使 用 指定 的 绝对 或 相对 地 址 


假设 ， 有 一 个 HIML 页 面 中 包含 了 如 下 的 代码 : 
<style type="text/css"> 
hil:before{ content: "标题 : ";  } 


p{color:blue} 
</style> 


m= >> 


<h1> 花 开 已 远 </h1> 
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<p> 你 所 去 的 地 方 ， 是 不 是 没有 寒冷 ， 也 没有 忧伤 。</p> 


运行 后 会 发 现 ， 在 “ 花 开 已 远 ” 文 字 之 前 多 出 了 “标题 : ”文字 ， 效 果 如 图 3-16 所 示 。 


无 标题 文 新 - Windews Internet Ezplorer 


标题 : 花 开 已 远 


你 所 去 的 地 方 ， 是 不 是 没有 豪 冷 ， 也 没有 忧伤 


3-16 ”实例 运行 效果 


3.7.2 ”实例 描述 


我 们 都 熟悉 HTML 页 面 的 运行 机 制 吧 ， 是 类 似 于 树 状 的 逻辑 结构 ， 从 上 到 下 依次 执行 。 
而 使 用 CSS 中 的 :before 伪 元 素 和 :after 伪 元 素 可 以 在 指定 元 素 的 前 面 或 者 后 面 插入 内 容 。 


3.7.3 ”实例 应 用 


【 例 3-7】 蔡 换 指 定位 置 

(1) 新 建 一 个 HTML 页 面 ， 命 名 为 zuopin.html。 
(2) 在 页 面 的 body 元 素 中 添加 如 下 代码 : 

<div id="wrap"> 


<h1> 作 品 集 </h1> 
</div> 


(3) 使 用 :before 伪 元 素 在 hl 元 素 之 前 显示 一 个 “《” 字 符 : 


hl:before { 
contente ~ hs 


} 
(4) 使 用 :after 伪 元 素 在 hl 元 素 之 后 显示 一 个 “》” 字 符 : 
hl:after { 
content: 7 

} 
(5) 接 下 来 在 hl 元 素 之 后 添加 一 个 dl 列表 ， 包 含 的 代码 如 下 所 示 : 
<ul> 

<1i> 森 林 里 的 秘密 </1i> 


<1i> 微 笑 的 鱼 </1i> 
<1i> 向 左 走向 右 走 </1i> 


<@— 
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<1i> 月 亮 忘 记 了 </1i> 

<1i> 我 的 心中 每 天 开 出 一 杂 花 </1i> 
<1i> 我 只 能 为 你 画 一 张 小 卡 片 </1i> 
<1i> 遗 失 了 一 只 猫 </1i> 

<1i> 小 蝴蝶 小 披风 </1i> 


</ul> 
(6) 根据 第 3) 和 第 (4) 步 的 方法 ， 在 这 里 为 1 元素 的 前 后 添加 "“" 和 "”" 符 号 ， 并 以 红色 显 
示 。 这 部 分 代码 如 下 所 示 : 


li:before { 
content: open-quote; 


color:#F00; 

} 

li:after { 
content:close-quote; 
color:#F00; 

} 


(7) 最 后 ， 在 body 元 素 之 后 添加 一 个 "The End" 作 为 结束 字符 串 。 


body:after { 
content: "The End"; 
display: block; 
margin-top: 10px; 
text-align: center; 


} 
(8) 保存 对 HTML 页 面 的 修改 ， 完 成 实例 的 制作 。 


3.7.4 ”运行 结果 


在 浏览 器 中 打开 zuopin.html 文件 查看 运行 效果 ， 如 图 3-17 所 示 。 


“杉林 里 的 秘 窑 ~ 
~ 微笑 的 位” 
“向 左 症 向 右 赴 ” 
“月 高 后 记 了 > 


3-17 ”运行 效果 
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3.7.5 “实例 分 析 


上 源码 解析 : 


通过 本 实例 ， 我 们 真正 掌握 了 :before 擅 元 素 和 :after 伪 元 素 的 使 用 方法 。 它 们 的 唯一 区 别 
就 是 : 一 个 是 定义 对 象 之 前 显示 的 内 容 ， 另 一 个 是 定义 对 象 之 后 显示 的 内 容 。 

然后 ， 就 是 content 属性 参数 的 设置 了 。 它 可 以 包含 字符 串 ， 也 可 以 是 表 3-1 中 给 出 的 其 
他 值 。 


3.8 ”常见 问题 解答 


3.8.1 CSS 中 伪 类 的 应 用 问题 


CSS 中 伪 类 的 应 用 问题 。 
网 络 课堂 : http://bbs.itzcn.comythread-11199-1-1.html 


假设 ， 在 我 的 页 面 中 有 如 下 的 CSS 代码 : 


xink {color: #003399?T 
:visited {color: #000066;} 
:hover {color: #000000;} 


a:active {color: #000000;} 

上 面 代码 定义 了 链接 的 4 种 状态 , 它 在 下 7、Firefox 浏览 器 下 对 所 有 块 级 元 素 都 可 以 使 用 。 
例如 : 

li:hover {border:lpx solid #2089D8;} 

li:hover 在 了 E7、Firefox 都 会 产生 效果 , 但 是 在 IE6 里 却 没有 效果 ， 有 没有 什么 办 法 可 以 使 
得 在 IE6 里 也 可 以 达到 这 个 效果 ? 

【解决 办 法 】 这 是 因为 在 CSS 1 中 此 伪 类 仅 可 用 于 a 对 象 。 对 于 无 href 属性 的 a 对象 ， 此 
伪 类 不 发 生 作用 。 而 在 CSS 2 中 此 伪 类 可 以 应 用 于 任何 对 象 。 

另外 ，IE 6 不 能 完全 支持 CSS 2 所 提供 的 功能 。 

当然 也 不 是 没有 解决 办 法 ， 可 以 添加 如 下 样式 : 

li a:hover {border:lpx solid #2089D8;display: block;text-decoration: nonez 

然后 用 如 下 HTML 来 引用 这 个 样式 。 


<li><a href="#">TEXT</a></1i> 


< 
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3.8.2 关于 CSS 伪 类 鼠标 效果 


关于 CSS 擅 类 鼠标 效果 。 
网 络 课堂 : http://bbs.itzcn.com/thread-11200-1-1.html 

a:link 和 a:visited 这 些 里 面 可 不 可 以 添加 图 片 而 不 改 文字 样式 ， 做 成 像 鼠 标 经 过 图 像 那 种 
的 效果 ? 具体 添加 图 片 的 代码 是 什么 ? 

【解决 办 法 】 鼠 标 经 过 时 样式 是 用 伪 类 a:hover，a:link 是 未 被 访问 前 的 样式 ，a:visited 是 
访问 过 后 的 样式 。 

在 <HTML> 和 <BODY> 元 素 之 间 插 入 如 下 代码 : 

<style type="text/css"> 

lae 

#al a:hover{background-image :url ("鼠标 滑 过 .jpg"); } 

#al a:link {background-image :url ("未 访问 前 .jpg"); } 

--> 

</style> 


上 面 的 代码 用 于 定义 一 个 人 D 选择 符 。 然 后 引用 上 面 样式 的 html 源码 如 下 : 


<div id="al"> 
<a href="#"> 我 是 未 访问 前 的 </a> 


</div> 


3.8.3 ”关于 first-child 伪 类 无 效 的 问题 


关于 first-child 伪 类 无 效 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-11201-1-1.html 

在 对 表格 使 用 first-child 伪 类 时 ， 需 要 给 所 有 表格 的 第 一 行 设置 样式 ， 按 说 可 以 使 用 下 面 
的 代码 来 进行 设置 。 

table > tr:first-childt 


background:red; 


} 
但 是 没有 效果 ， 一 定 要 用 下 面 的 代码 才 可 以 达到 想 要 的 效果 。 


tr:first-child{ 
background:red; 
} 


我 是 新 手 ， 对 这 个 伪 类 的 用 法 总 是 似 懂 非 懂 ， 请 高 手 解释 一 下 其 中 的 道理 。 
【解决 办 法 】table > tr:first-child 之 所 以 不 能 选中 第 一 个 tr， 就 是 因为 在 table 和 tr 中 有 一 
个 tbody。 虽 然 没 有 显 式 地 写 明 tbody， 但 是 在 解析 表格 中 还 是 会 自动 解析 出 来 的 。 所 以 ， 你 的 


mi) >> 


代码 
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是 错误 的 ， 改 用 tr:first-child 就 可 以 了 。 


.4 ”box:after{} 的 功能 


[Es CSS 问题 .box:after{} 是 什么 意思 ? 


吝 


有 网 络 课堂 : http://bbs.itzcn.com/thread-11202-1-1.html 
在 一 个 CSS 模板 中 发 现 有 下 面 两 行 代码 : 


-box:after{ content: "."; }, 
.box:after{ content:"\0020"; }， 


运行 了 一 下 页 面 ， 没 看 到 有 什么 效果 。 请 教 各 位 ， 那 两 行 代 码 是 什么 意思 ? 
【解决 办 法 】 其 实 很 简单 啊 。 就 是 使 用 了 CSS 中 的 :after 伪 类 ， 它 的 含义 就 是 在 匹配 的 选 


择 符 之 后 追加 的 内 容 。 


在 你 这 两 行 代码 中 对 content 定义 了 两 次 ， 而 后 面 content 的 定义 会 覆盖 前 面 的 定义 。 追 加 


的 位 置 是 在 class 名 称 为 box 的 元 素 后 。 


3.9 习 题 
1. 填空 题 
(1) 在 CSS 的 链接 伪 类 中 ， 必须 被 置 于 a:link 和 a:visited 之 后 才 有 效 。 


(2) 要 使 某 个 元 素 下 第 一 个 下 子 元 素 变 成 红色 ， 应 该 使 用 代码 
(3) 假设 有 如 下 的 一 段 HTML 代码 : 
<ul> 
<1i> 新 闻 </1i> 
<1i> 网 页 </1i> 
<1i> 贴 吧 </1i> 
<1i> 知 道 </1i> 
<1i> 图 片 </1i> 
</ul> 
要 使 上 元素 中 第 一 个 字符 为 红色 、 字 号 为 18 像素 ， 应 该 使 用 代码 5 
(4) 在 使 用 伪 类 时 ，q 元 素 表示 要 定义 的 引用 类 型 
2. 选择 题 
(1) 在 下 面 的 CSS 伪 类 中 使 用 来 定义 鼠标 移动 到 链接 上 的 样式 。 
A. a:hover B. a:link C. aivisited D. a:active 
(2) 人 擅 类 用 来 设置 对 象 在 成 为 焦点 时 的 样式 。 
A. :first-child B. :focus C. :lang D. :before 
(3) 设置 页 面容 器 第 一 页 使 用 的 样式 应 该 是 伪 类 。 


< 


ma >> 


A. :first B. :first-child C. :first-letter D. :first-line 
(4) 下 面 不 是 content 的 参数 值 。 

A. image B. string C. ul D. attr 
(5) 在 下 面 的 伪 类 中 不 能 控制 打印 尺寸 。 

A. :first B. :top C. :Tight D: :Ef 
3. 上 机 练习 


上 机 练习 1: 实现 多 种 链接 效果 
通过 本 章 的 学 习 ， 我 们 知道 链接 伪 类 是 众多 CSS 伪 类 中 使 用 频率 最 高 的 。 它 们 是 a:link、 


avisited、a:hover 和 a:active， 本 次 上 机 练习 的 目的 也 是 针对 该 伪 类 的 。 


要 求 读 者 使 用 链接 伪 类 实现 多 种 不 同 的 链接 效果 。 如 图 3-18 所 示 是 a:link 效果 ， 图 3-19 


所 示 是 a:hover 效果 ， 图 3-20 所 示 是 a:visited 效果 ， 图 3-21 所 示 是 aiactive 效果 。 


图 3-20 aivisited 效果 3-21 ”a:active 效果 
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上 机 练习 2: 实现 对 HTML 页 面 追 加 内 容 


假设 ， 在 一 个 HTML 中 的 body 元素 中 仅仅 包含 了 如 下 的 代码 : 
<div align="center” > <q> 谁 要 在 我 前 面 显示 ， 简 直 是 在 太岁 头 上 动 士 ! </q> </div> 


<div align="center" > </div> 

<div align="center" > </div> 

现在 要 求 读者 在 不 改变 HTML 页 面 内 容 结构 的 情况 下 ， 向 其 中 追加 内 容 ， 实 现 如 图 3-22 
所 示 的 运行 效果 。 


| 届 二 工 字 Ya 开 发 威 荔 之 喇 \rSS\ 源 代码 各 3 章 \Lianziz htal x 


傅 收 训 天 | 碎 上 各 陋习 荀 - 辑 - 互 咒 -” RE 四 去 主 名 - 


我 是 天 下 第 一 ， 我 要 排 在 人 
谁 要 在 我 前 面 显示 ， i 


祝 你 好 运 ，Bye 


图 3-22 运行 效果 


< 


(> 
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内 容 摘要 : 

网 页 最 重要 的 是 给 客户 提供 信息 ， 而 信息 的 载体 是 文本 , 文本 是 由 字体 组 成 的 。CSS 样式 
表 分 别提 供 了 字体 属性 和 文本 属性 来 对 页 面 进行 更 精确 的 布局 。 在 本 章 中 将 详细 介绍 字体 属 
性 ， 文 本 属性 将 在 下 一 章 介绍 。 

学 习 目标 : 

@ 掌握 颜色 属性 的 应 用 
掌握 字体 属性 的 应 用 
掌握 字体 外 部 修饰 属性 的 用 法 
了 解 间隔 属性 letter-spacing 和 word-spacing 
了 解 行 高 属性 line-height 的 用 法 


4.1 炫 彩 诗 


当 看 到 做 出 来 的 网 页 中 的 字体 总 是 一 种 灰暗 的 颜色 时 , 是 否 感到 页 面 效 果 很 单调 呢 ? 接 下 
来 将 介绍 CSS 的 颜色 属性 ， 它 能 够 使 页 面 的 字体 色彩 变 得 丰富 多 彩 。 


ES 视频 教学 : 光盘 /视频 /4/4.1 炫 彩 诗 .avi 


图 长 度 : ;分钟 


4.1.1 基础 知识 一 一 Color 


颜色 用 于 设 定 字体 及 背景 的 颜色 显示 ，CSS 中 共 预 设 了 16 种 颜色 及 它们 的 衍生 色 ， 这 16 
种 颜色 是 CSS 规范 推荐 的 ， 能 够 被 大 多 数 主流 浏览 器 所 识别 ， 如 表 4-1 所 示 。 


表 4-1 CSS 推荐 颜色 


颜 色 名 称 颜 色 名 称 
aqua 浅 绿色 black 黑色 
blue 蓝 色 fuchsia 桃红 色 
ra 灰色 green 绿色 
lime 亮 绿色 maroon 栗色 
na 藏青 色 olive 橄榄 色 
purple 紫色 Ted 红色 
Silver 银色 teal 青色 
white 白色 ellow 黄色 


这 些 颜 色 在 代码 中 可 以 直接 以 名 称 方式 使 用 ， 如 以 下 代码 : 
div {color:red; } 
除了 这 16 种 基准 颜色 之 外 ， 还 可 以 使 用 CSS 定义 的 其 他 预定 义 颜色 ， 大 多 数 浏览 器 能 够 
识别 包括 这 16 种 颜色 在 内 的 140 多 种 颜色 ， 例 如 ，silver、PaleGreen 等 。 
此 外 ， 为 了 让 页 面色 彩 更 加 丰富 ， 还 可 以 使 用 十 六 进 制 颜色 和 RGB 颜色 。 
用 颜色 名 称 指定 color 可 能 不 被 一 些 浏览 器 所 接受 。 但 使 用 RGB 值 指定 颜色 能 被 
旨 示 | 。 所 有 的 浏览 器 识别 并 正确 显示 。 


4.1.2 ”实例 描述 


大 家 初学 CSS， 相 信 对 color 属性 的 理解 还 不 是 很 透彻 吧 ， 不 过 不 要 担心 ， 下 面 我 们 通过 
一 个 “ 炫 彩 诗 ”的 实例 来 深入 地 学 习 和 理解 color 属性 的 用 法 。 


Ed >> 


4.1.3 实例 应 用 


【 例 4-1】 炫 彩 诗 
(1) 首先 ， 新 建 一 个 名 为 poetry 的 html 文件 ， 在 文件 中 写 入 以 下 代码 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title> 炫 彩 诗 </title> 
</head> 
<body> 
<div id="div2"> 
<p class="p0" > 江 楼 月 </p> 
<p class="pz"> 一 作者 : 白居易 </p> 
<p class="pl"> 嘉 陵 江 曲 曲 江 池 ， 明 月 虽 同人 别离 。</p> 
<p class="p2"> 一 宵 光 景 潜 相 忆 ， 两 地 阴 晴 远 不 知 。</p> 
<p class="p3"> 谁 料 江 边 怀 我 夜 ， 正 当 池 了 昱 望 君 时 。</p> 
<p class="p4"> 今 朝 共 语 方 同 悔 ， 不 解 多 情 先 寄 诗 。< /p> 
</div> 
</body></html> 


(2) 在 <head> 标 签 内 部 ， 通 过 CSS 的 颜色 样式 来 控制 div 和 了? 标签 的 样式 ， 以 实现 需要 达 


到 的 效果 。 其 代码 如 下 : 


<style type="text/css"> 
bodyl{ 
background-color: bisque; 
background-image: url("img/bg.jpg"); 
} 
#div2{ 
font-size: 14pt; 
margin-top: 200px; 
margin-left: 350px 
} 
.po{ 
color: red; 
margin-left: 110px 
} 
.pz{ 
font-size:12pt; 
margin-left: 150px 
-pl{color: blue} 
-p2{color: RGB(150,65,220)} 
-p3{color: #00FF00} 
-p4{fcolor: saddlebrown} 
</style> 


< 
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4.1.4 运行 结果 


下 面 通过 正 浏览 器 打开 poetry.html 文件 ， 就 可 以 看 到 以 下 效果 ， 如 图 4-1 所 示 。 


一 作者 ， 白居易 
嘉陵 江 曲 掀 江 池 ， 强 月 虽 同 人 别离 。 


一 育 光 及 洁 相 忆 ， 两 地 阴 晴 远 不 知 。 
惟 料 江 边 峡 我 夜 ， 正 当 池 昱 望 君 时 . 
今朝 失语 方 同 悔 ， 不 解 多 情 先 寄 诗 。 


4-1 炫 彩 诗 效果 


4.1.5 实例 分 析 


en 


上 述 实例 创建 了 一 个 静态 页 面 , 通过 <div> 标 签 来 控制 布局 , 在 <p> 标 签 的 伪 类 中 定义 color 
属性 ， 用 来 显示 所 需要 的 效果 ， 最 终 得 到 如 图 4-1 所 示 的 绚丽 多 彩 的 页 面 效果 。 

在 不 同 的 操作 系统 或 浏览 器 中 ， 同 一 种 颜色 的 显示 可 能 会 不 同 。 所 以 要 尽量 使 用 网 络 安全 
色 。 例 如 ，RGB 值 为 51 倍数 的 颜色 值 ， 十 六 进 制 值 为 00、33、66、99、CC 和 FF 的 组 合 ， 都 
是 安全 的 。 


42 编排 网 页 


每 个 人 在 浏览 页 面 时 ， 对 页 面 的 第 一 印象 可 能 就 是 文档 所 使 用 的 字体 和 页 面 上 的 各 种 颜 
色 。 一 个 页 面 字体 使 用 的 好 坏 可 以 直接 关系 到 页 面 的 浏览 质量 。 因 此 ， 在 CSS 中 有 关 字体 的 
属性 都 具有 非常 强大 的 功能 。 下 面 就 来 看 看 有 关 字 体 的 属性 吧 。 


上 视频 教学 : 光盘 /视频 /414.2 编排 网 页 avi @ 度 : 分 名 


4.2.1 基础 知识 一 一 字体 


CSS 字体 (font) 属 性 用 来 定义 文本 中 的 字体 。 设置 字 体 属性 是 样式 表 的 常见 用 途 之 一 。 CSS 
字体 属性 允许 设置 字体 系列 (font-family) 和 字体 加 粗 (font-weight)， 还 可 以 设置 字体 的 大 小 、 字 
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体 风格 (如 斜体 ) 和 字体 变形 (如 小 型 大 写字 母 ) 等 。 


。 第 4 章 字体 属性 国 
1. font-style 


font-style 属性 用 于 定义 字体 显示 的 样式 ， 有 三 种 可 选 属性 值 : normal、italic 和 oblique。 
其 中 normal 是 默认 值 ， 表 示 正 常 的 字体 样式 ; italic 表示 将 文本 设置 为 斜体 样式 ，oblique 表示 
将 没有 斜体 变量 的 特殊 字体 设置 为 斜体 样式 。 例 句 如 下 : 

Sl1{ font-sytle:italic} 

下 面 通过 一 个 小 实例 来 演示 font-style 的 三 种 属性 值 的 用 法 ， 实 例 部 分 代码 如 下 : 


<title> 字 体 风格 属性 font-style</title> 
<STYLE> 
-box grey p{ 


font-style:italic 
} 
"box _ grey h31{ 
font-style:oblique 
} 
</STYLE> 


<div class="box grey"> 

<h3><img src="images/page notice.gif" width="19px" 
height="16px"” alt="textbox"” /> <strong> 蓝 色 心 情 许 愿 墙 </strong></h3> 

<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 

</p><p> 

每 个 人 心中 都 有 美好 的 愿望 ,并且 渴望 实现 ， 不 妨 为 自己 或 亲友 写 个 愿望 条 ， 永 

久 地 挂 在 蓝 色 心情 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。 蓝 色 心 情 许愿 墙 是 互联 网 上 第 一 个 真正 的 许愿 墙 ! 
为 您 提供 许愿 及 祈祷 平台 ， 致 力 于 实现 每 个 人 心中 的 美好 梦想 ， 蓝 色 心 情 祝 您 早日 实现 您 的 美好 愿望 。 


许愿 墙 的 故事 :相传 在 几 万 年 前 , 一 颗 鬼 灵 精 怪 的 魔 豆 已 在 主 的 身边 陪伴 了 五 千年 。 他 是 潘多拉 魔 盒 
里 最 后 一 件 礼物 一 一 希望 。 主 把 他 放 在 御 座 上 的 珀 西 盒 里 ， 护 佑 着 天 堂 里 的 一 切 。 在 魔 豆 存在 的 地 方 总 
是 充满 希望 的 光芒 ， 在 他 面前 许 下 的 愿望 都 能 实现 。 
</p> 
</div> 


在 <style> 标 签 里 对 <p> 和 <h3> 标 签 使 用 font-style 属性 ， 演 示 结 果 如 图 4-2 所 示 。 
2. font-variant 


font-variant 属性 提供 了 字体 的 变形 功能 ， 该 属性 有 两 个 属性 值 : normal 和 small-caps。 
normal 是 默认 值 ， 用 来 描述 普通 文本 ，small-caps 表示 使 用 小 型 的 大 写字 母 文本 。 例 句 如 下 : 


.S51 {font-variant:small-caps} 


<@—— 


-加 A 
育 中 站 天 。 若 字 相克 福原 位 font-=ty1* 


由 公告 
扫 上 竺 了 起 拉 同 片 。 雪 过 


问心 站 匠 共 
朱 ， 才 基地 避 小 东 起 明 部 怕 不 史 时 这 吉 ， 丰 等 人 《前山 语 ， 素 区 友 考 录用 本 
人 一 俐 全- 


4-2 设置 font-style 属性 的 实例 运行 效果 


下 面 通过 一 个 小 实例 来 演示 font-variant 的 两 种 属性 的 用 法 ， 实 例 中 CSS 定义 的 部 分 代码 
如 下 : 


<html> 
<head> 
<title> 字 体 变 量 属性 font-variant</title> 
<STYLE> 
-box grey pt{ 
font-variant:small-caps 
} 

</STYLE> 
</head> 
<body> 
<div class="box grey"> 

<h3><img src="images/page notice.gif" width="19px" 
height="16px" alt="textbox"” /> <strong> 蓝 色 心 情 许 愿 墙 </strong></h3> 

<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 

</p><p> 

每 个 人 心中 都 有 美好 的 愿望 ， 并 且 渴 望 实现 ， 不 妨 为 自己 或 亲友 写 个 愿望 条 ， 永 

久 地 挂 在 蓝 色 心情 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。 蓝 色 心 情 许愿 墙 是 互联 网 上 第 一 个 真正 的 许愿 墙 ! 
为 您 提供 许愿 及 祈祷 平台 ， 致 力 于 实现 每 个 人 心中 的 美好 梦想 ， 蓝 色 心 情 祝 您 早日 实现 您 的 美好 愿望 。 


许愿 墙 的 故事 :相传 在 几 万 年 前 , 一 颗 鬼 灵 精 怪 的 魔 豆 已 在 主 的 身边 陪伴 了 五 千年 。 他 是 潘多拉 魔 盒 
里 最 后 一 件 礼物 一 一 希望 。 主 把 他 放 在 御 座 上 的 珀 西 盒 里 ， 护 佑 着 天 堂 里 的 一 切 。 在 魔 豆 存在 的 地 方 总 
是 充满 希望 的 光芒 ， 在 他 面前 许 下 的 愿望 都 能 实现 。 
</p> 
</div> 
</body> 
</html> 
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以 上 代码 在 浏览 器 中 运行 的 效果 如 图 4-3 所 示 。 


图 4-3 设置 font-variant 属性 的 实例 运行 效果 


3. font-weight 
font-weight 属性 用 于 对 显示 元 素 中 的 文本 字体 进行 加 粗 。 该 属性 有 13 个 有 效 值 ， 分 别 是 
bold、bolder、lighter、normal、100、200、300、400、500、600、700、800、900。 如 果 没 有 
设置 该 属性 ， 则 使 用 默认 值 normal。 设 置 值 为 100 一 900， 值 越 大 ， 加 粗 的 程度 越 高 。 其 中 ， 
数字 值 400 相当 于 关键 字 normal，700 相当 于 bold。 表 4-2 所 示 列 出 了 相关 信 
表 4-2 font-weight 属性 的 取 值 与 描述 


值 描述 
bold 定义 粗 体 字体 
bolder 定义 更 粗 的 字体 ， 相 对 值 
lighter 定义 更 细 的 字体 ， 相 对 值 
normal 默认 值 ， 定 义 标准 的 字体 
100 一 900(100 的 整数 倍 ) 定义 由 细 到 粗 的 字体 ， 其 中 ，400 等 同 于 normal，700 等 同 于 bold 
inherit 规定 应 该 从 父 元 素 继承 字体 的 粗细 


0@ | 任何 版 本 的 Internet Explorer( 包 括 IE 8) 都 不 支持 属性 值 inherit。 


提示 
例句 如 下 : 
<p style = "font-weight :bold"> 这 段 文字 字体 的 浓淡 属性 (font-weight) 值 是 bold。<p> 
下 面 通过 一 个 小 实例 来 演示 font-weight 的 各 种 属性 值 的 用 法 ， 实 例 代码 如 下 : 


<p style = "font-weight:400"> 开 夜 的 天 窗 ， 对 着 划 过 的 流星 许 下 永恒 的 祝愿 ， 不 变 的 诺言 。 
在 每 个 人 的 心底 ， 都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


<@— 


ss Web 开 发 学 习 实录 .入 


</p> 
<p style="font-weight:bolder"> 
每 个 人 心中 都 有 美好 的 愿望 ， 并 且 渴 望 实现 ， 不 妨 为 自己 或 亲友 写 个 愿望 条 ， 永 
久 地 挂 在 蓝 色 心 情 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。 蓝 色 心情 许愿 墙 是 互联 网 上 第 一 个 真正 的 许愿 墙 ! 
为 您 提供 许愿 及 祈祷 平台 ， 致 力 于 实现 每 个 人 心中 的 美好 梦想 ， 蓝 色 心 情 祝 您 早日 实现 您 的 美好 愿望 。 


许愿 墙 的 故事 : 相传 在 几 万 年 前 ,一 颗 鬼 灵 精 怪 的 魔 豆 已 在 主 的 身边 陪伴 了 五 千年 。 他 是 潘多拉 魔 盒 
里 最 后 一 件 礼物 一 一 希望 。 主 把 他 放 在 御 座 上 的 珀 西 盒 里 ， 护 佑 着 天 堂 里 的 一 切 。 在 魔 豆 存在 的 地 方 总 
是 充满 希望 的 光芒 ， 在 他 面前 许 下 的 愿望 都 能 实现 。 


</p> 


以 上 代码 在 浏览 器 中 运行 的 效果 如 图 4-4 所 示 。 


:a 
新 伟 有 雪 的 天 片 ， 站 汪 下 吉 1 


和 全 早日 实 : 
几 万 年 湖 ， 二 人 席 避 人 二 的 和 地 了 人 
物 一 条 望 。 主 把 他 放 在 多 座 上 的 珀 两 念 里, 

5 


图 4-4 设置 font-weight 属性 的 实例 运行 效果 


4. font-size 


font-size 属性 用 于 设置 字体 的 大 小 ，CSS 为 该 属性 提供 了 多 种 设置 字体 值 的 方法 ， 其 取 值 
如 表 4-3 所 示 。 
表 4-3 font-size 属性 的 取 值 与 描述 


字体 值 描 述 
XX-Small 
x-small 
small = 

把 字体 的 尺寸 设置 为 不 同 的 尺寸 ， 从 xx-small 到 xx-large 
medium 

默认 值 : medium 

large 
X-large 
XX-large 
Smaller 把 font-size 设置 为 比 父 元 素 更 小 的 尺 才 
larger 把 font-size 设置 为 比 父 元 素 更 大 的 尺寸 
length 把 font-size 设置 为 一 个 固定 的 值 
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续 表 


字体 值 描 述 
把 font-size 设置 为 基于 父 元 素 的 一 个 百分比 值 


规定 应 该 从 父 元 素 继承 字体 尺寸 


在 这 些 字体 值 中 ，xx-small、x-small、small、medium、large、x-large、xx-large 设置 字体 
的 绝对 尺寸 ， 根 据 对 象 字体 进行 调整 ， 但 没有 有 具体 的 值 进行 调整 ，xx-large 表示 最 大 ，xx-small 
表示 最 小 。 例 句 如 下 : 
<p style = "font-size:xx-small"> 字 体 大 小 属性 (font-size) 值 是 xx-small。<p> 
下 面 通过 一 个 小 实例 来 演示 font-size 的 各 种 属性 值 的 用 法 ， 实 例 部 分 代码 如 下 : 
<p style="font-size:20px"> 开 夜 的 天 窗 ， 对 着 划 过 的 流星 许 下 永恒 的 祝愿 ， 不 变 的 诺言 。 在 每 
个 人 的 心底 ， 都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 
让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 
</p> 
<p style="font-size:12px"> 
每 个 人 心中 都 有 美好 的 愿望 ,并 且 汤 望 实现 ， 不 妨 为 自己 或 亲友 写 个 愿望 条 ， 永 
久 地 挂 在 蓝 色 心 情 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。 蓝 色 心情 许愿 墙 是 互联 网 上 第 一 个 真正 的 许愿 墙 ! 
为 您 提供 许愿 及 祈祷 平台 ， 致 力 于 实现 每 个 人 心中 的 美好 梦想 ， 蓝 色 心 情 祝 您 早日 实现 您 的 美好 愿望 。 


许愿 墙 的 故事 :相传 在 几 万 年 前 ,一 颗 鬼 灵 精 怪 的 魔 豆 已 在 主 的 身边 陪伴 了 五 千年 。 他 是 潘多拉 魔 盒 
里 最 后 一 件 礼物 一 一 希望 。 主 把 他 放 在 御 座 上 的 珀 西 盒 里 ， 护 佑 着 天 堂 里 的 一 切 。 在 魔 豆 存在 的 地 方 总 
是 充满 希望 的 光芒 ， 在 他 面前 许 下 的 愿望 都 能 实现 。 
</p> 


在 浏览 器 中 的 运行 效果 如 图 4-5 所 示 。 


4-5 ”设置 font-size 属性 的 实例 运行 效果 


5. font-family 
font-family 属性 用 于 指定 可 蔡 换 的 字体 类 型 名 称 ， 如 Arial、Tahoma、Courier、 华 文 行 楷 、 


< 


宋体 等 字体 类 型 。 例 如 : 
pt 
font-family: 宋体 ; 
| 
font-family 可 以 把 多 个 字体 名 称 作为 一 个 “ 回 退 ”系统 来 保存 。 如 果 浏览 器 不 支持 第 一 个 
字体 ， 则 会 尝试 下 一 个 。 也 就 是 说 浏览 器 会 使 用 它 支 持 和 识别 的 第 一 个 值 。 例 如 : 


p{ 
font-family: "Tahoma","Times New Roman"， 宋体 ; 


| 

如 果 浏 览 器 不 能 正确 显示 Tahoma 字体 ， 那 么 将 以 Times New Roman 的 形式 显示 ， 如 果 
Times New Roman 字体 也 不 能 在 浏览 器 中 显示 ， 则 使 用 宋体 。 将 以 上 代码 应 用 到 页 面 中 ， 在 浏 
览 器 中 运行 ， 如 图 4-6 所 示 。 


灾 收 本 天。 | 大字 体 名 部 必 性 fat-ei ie 


字体 的 名 称 属性 (font-family), 


图 4-6 设置 font-family 属性 的 实例 运行 效果 


如 果 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 串 或 空格 组 成 ， 则 应 使 用 双 引 号 。 但 如 果 
在 页 面 中 使 用 style 属性 定义 样式 表 ， 那 么 就 要 使 用 单 引 号 ， 例 如 以 下 部 分 代码 : 


<p style="font-family: 'Times New Roman'"> 开 夜 的 天 窗 ， 对 着 划 过 的 流星 许 下 永恒 的 祝 
愿 ， 不 变 的 诺言 。 在 每 个 人 的 心底 ， 都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
< 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 

</p> 

<p style="font-family:' 新 宋体 '"> 
每 个 人 心中 都 有 美好 的 愿望 ， 并 且 渴 望 实现 ， 不 妨 为 自己 或 亲友 写 个 愿望 条 ， 永 

久 地 挂 在 蓝 色 心 情 许 愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。 蓝 色 心情 许愿 墙 是 互联 网 上 第 一 个 真正 的 许愿 墙 ! 
为 您 提供 许愿 及 祈祷 平台 ， 致 力 于 实现 每 个 人 心中 的 美好 梦想 ， 蓝 色 心 情 祝 您 早日 实现 您 的 美好 愿望 。 


许愿 墙 的 故事 :相传 在 几 万 年 前 , 一 颗 鬼 灵 精 怪 的 魔 豆 已 在 主 的 身边 陪伴 了 五 千年 。 他 是 潘多拉 魔 合 
里 最 后 一 件 礼物 一 一 希望 。 主 把 他 放 在 御 座 上 的 珀 西 盒 里 ， 护 佑 着 天 堂 里 的 一 切 。 在 魔 豆 存在 的 地 方 总 
是 充满 希望 的 光芒 ， 在 他 面前 许 下 的 愿望 都 能 实现 。 


</p> 


在 浏览 器 中 运行 的 效果 如 图 4-7 所 示 。 


sw >> 


图 4-7 字体 名 称 属性 的 实例 运行 效果 
6. font 


我 们 在 设计 页 面 时 ， 不 可 能 对 字体 只 设置 一 种 属性 ， 而 是 设置 多 种 属性 ， 但 是 这 些 属 性 逐 
个 设置 起 来 比较 麻烦 ，CSS 样式 表 提 供 了 font 属性 来 解决 这 一 问题 。 

font 属性 是 各 种 字体 属性 的 一 种 快捷 的 综合 写法 。 这 个 属性 可 以 综合 字体 风格 属性 
(font-style)、 字 体 变 量 属性 (font-variant)、 字 体 浓 淡 属 性 (font-weight)、 字 体 大 小 属性 (font-size) 
和 字体 名 称 属性 等 属性 。 如 下 所 示 : 


.52 {font:normal small-caps normal 14pt Courier} 


font 属性 内 的 属性 值 的 排列 顺序 是 font-style 、font-variant 、font-weight 、font-size 和 
font-family， 各 个 属性 值 之 间 要 用 空格 隔 开 。 但 如 果 font-family 属性 有 多 个 值 ， 则 使 用 逗号 隔 
开 。 其 中 font-size 和 font-family 的 位 置 必须 固定 ， 不 能 改变 ， 否 则 将 有 可 能 被 浏览 器 忽略 ， 如 
图 4-8 和 图 4-9 所 示 ， 其 中 图 4-9 是 font-size 和 font-family 位 置 调换 的 效果 。 


图 4-8 font 属性 效果 图 4-9 font 属性 值 排列 调换 的 效果 


4.2.2 实例 描述 


我 们 在 设计 网 页 时 ， 是 否 经 常 遇 到 一 个 页 面 中 会 出 现 大 小 、 风 格 等 不 一 致 的 字体 呢 ? 自己 
动手 去 调试 的 话 ， 有 些 繁杂 。 下 面 通 过 一 个 实例 来 介绍 如 何 使 用 CSS 字体 属性 编排 网 页 。 
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4.2.3 实例 应 用 


【 例 4-2】 编 排 网 页 
在 这 个 实例 中 ， 我 们 将 用 到 字体 属性 中 的 font-style、font-variant、font-weight、font-size、 


font-family 和 font 综合 属性 来 对 页 面 进行 编排 ， 使 我 们 的 页 面 都 有 一 个 统一 的 风格 。 


目前 通过 CSS 2 技术 还 不 能 直接 实现 普通 段落 文字 分 栏 排版 ， 要 实现 分 栏 的 效果 ， 需 要 借 


助 多 个 div 浮动 定位 来 完成 ， 下 面 我 们 将 一 步 步 实现 这 个 实例 。 


(1) div 布局 页 面 。 为 了 制作 三 列 的 排版 效果 ， 我 们 将 三 个 div 放 入 #div_1 内 ， 通 过 后 面 将 


要 讲 到 的 伪 类 .text 来 控制 属性 ， 代 码 如 下 : 


st >> 


<div class="text"><p> 也 许 在 每 个 恋人 眼 里 对 方 都 是 美的 ， 但 这 个 美能 维持 多 久 ， 一 小 时 、 一 天 、 
一 年 、 还 是 一 辈子 ! 在 我 的 理想 中 的 女人 朴实 和 善良 是 最 美的 ， 美 不 一 定 就 是 外 表 ， 想 想 我 们 的 容颜 能 
维持 多 久 ， 人 的 一 生 很 短暂 你 美丽 的 容颜 只 占 了 生命 的 五 分 之 一 ， 现 实生 活 中 掺 杂 了 太 多 的 无 奈 ， 化 妆 
品 ， 手 术 整 形 ， 药 物 刺激 还 有 无 法 想象 的 更 多 的 方式 去 争取 得 到 那个 美 ， 但 却 失去 了 纯真 的 美 ! 
</p></div> 

<div class="text"><p> 在 我 看 到 一 个 女孩 愿意 嫁 给 曾经 救 过 他 人 的 英雄 ， 但 已 经 面目 全 非 他 
时 ， 我 为 此 感动 ， 她 是 最 美的 ! 一 个 女孩 因为 自己 面部 在 工作 受伤 而 主动 提出 跟 男 朋友 分 手 ， 女 孩 流 着 
泪 说 : 我 不 想 让 你 跟 我 一 起 承担 我 的 伤 痛 : 男孩 简单 朴实 地 说 道 : 你 永远 是 我 眼中 最 美的 ， 就 算 你 到 了 
老 的 脸 上 全 是 皱纹 ， 你 也 是 ， 嫁 给 我 吧 ! 也 许 美 真 的 不 用 刻意 去 伪装 和 装饰 ! </p></adiv> 

<div class="text"><p> 在 此 我 想到 了 现实 生活 中 ， 我 的 身边 或 多 或 少 地 也 发 生 过 这 样 或 那样 
的 美 ， 谁 能 在 意 到 自己 身边 的 过 客 ， 我 每 天 看 着 不 同 的 面孔 ， 想 着 他 们 的 美丽 ， 清 晨 忙 碌 的 清洁 工 你 们 
把 街道 打扫 得 如 此 的 美 ， 建 筑 工人 把 城市 建设 得 如 此 美丽 ， 农 田 里 辛勤 的 农民 耕耘 出 美丽 的 高 粱 ， 而 我 
们 排斥 或 甚至 会 瞧不起 这 些 美丽 ， 这 些 美 我 们 都 不 曾 想起 。 

</p></div> 

</div> 


(2) 定义 CSS 样式 规则 。 
Q@ 定义 页 面 主体 body 的 样式 ， 背景 颜色 等 。 样 式 代码 如 下 所 示 : 


background-color: bisque; 
@ 定义 div 样式: 距 项 0px、 水 平 居 中 、 宽 度 600px、 首 行 缩 进 25px: 


#div 1{ 
width: 600px; 
margin: 0 auto; 


} 
(3) 定义 控制 div 样式 : 宽度 190px、 右 边 距 10px， 向 左 浮动 : 


.text{ 
width: 190px; 
padding: 0 10px; 
float: left; 

} 


(4) 定义 段落 样式 : 行距 18px、 字 号 为 14px、 字 体 为 “宋体 ”: 
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line-height: 18px; 
font-size: 12px; 
font-family: "宋体 " 
ER 

4.2.4 运行 结果 


将 写 好 的 页 面 在 浏览 器 中 运行 ， 我 们 可 以 看 到 如 图 4-10 所 示 的 效果 。 


图 4-10 文字 编排 


4.2.5 ”实例 分 析 


ae 


该 实例 中 创建 了 一 个 静态 页 面 ， 在 页 面 中 使 用 div 布局 ， 简 单 地 使 用 div 控制 页 面 的 输出 
版 式 ， 然 后 通过 这 节 所 学 的 几 种 属性 对 文本 字体 进行 修饰 。 最 终 达到 如 图 4-10 所 示 的 效果 。 


4.3 网 页 文章 一 一 感怀 秋天 


在 做 网 页 时 ， 文 章 是 最 能 突出 信息 传播 的 部 分 ， 在 写 文章 的 基础 上 ， 我 们 使 用 CSS 的 修 
饰 属性 对 字体 进行 修饰 ， 这 样 使 文章 读 起 来 有 美的 享受 ， 看 起 来 也 会 赏心悦目 。 


上 视频 教学 : 光盘 /视频 /4/4.3 ”网 页 文章 一 一 感怀 秋天 .avi @ 攻 度 : 6 分 钟 


4.3.1 基础 知识 一 一 字体 装饰 


在 本 节 中 我 们 将 讲 到 对 字体 的 外 部 修饰 所 使 用 的 各 个 属性 ， 包 括 text-decoration 、 
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text-underline-position、text-shadow 和 text-transform 属性 。 这 些 属 性 可 以 对 文字 进行 加 下 划 线 、 
更 改 字体 大 小 写 、 添 加 阴影 等 操作 。 下 面 对 这 些 属 性 进行 介绍 。 


1. text-decoration 
text-decoration 属性 可 以 为 页 面 提供 多 种 文本 的 修饰 效果 ， 比 如 下 划 线 、 闪 烁 、 删 除 线 、 


贯穿 线 、 上 划 线 等 。 它 的 属性 值 如 表 4-4 所 示 。 


表 4-4 text-decoration 属性 的 取 值 与 描述 


mt) >> 


属性 值 效果 描述 

none 默认 值 ， 对 文本 不 进行 任何 修饰 
blink 对 文本 添加 闪烁 
Underline 对 文本 添加 下 划 线 
overline 对 文本 添加 上 划 线 
line-throu 对 文本 添加 贯穿 线 

语法 格式 : 

P{text-decoration: value} 

或 者 使 用 内 部 修饰 语法 : 


<p style=" text-decoration: value "> 


例如 我 们 对 文字 添加 闪烁 和 下 划 线 的 例子 ， 代 码 如 下 : 


<p style="” text-decoration: blink "> 开 夜 的 天 窗 ， 对 着 划 过 的 流星 许 下 永恒 的 祝愿 ， 不 变 
的 诺言 。 在 每 个 人 的 心底 ， 都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 </p> 

<p style=" text-decoration: underline "> 让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 
祝福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 永 久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。</p> 


将 带 有 代码 的 文件 在 浏览 器 中 运行 ， 我 们 可 以 看 到 如 图 4-11 所 示 的 效果 。 


4-11 设置 text-decoration 属性 的 实例 运行 效果 


blink 闪烁 效果 只 有 Mozilla 和 Netscape 浏览 器 支持 ,而 正和 其 他 浏览 器 (如 Opera) 
| 。 都 不 支持 该 效果 。 


提示 
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2. text-underline-position 


text-underline-position 属性 定义 了 下 划 线 的 位 置 ， 此 属性 对 于 currentStyle 对 象 来 说 是 只 读 
的 ， 对 于 其 他 对 象 而 言 是 可 读 可 写 的 。 它 有 两 个 属性 值 ， 如 表 4-5 所 示 。 
表 4-5 ”text-underline-position 属性 的 取 值 与 描述 


属性 什 效果 描述 
和 | 默认 值 ， 在 文本 的 下 面 设置 下 划 线 
在 文本 上 面 设置 上 划 线 
语法 格式 : 


P{text-underline-position: value } 或 者 
<p style=" text-underline-position: value "> 


例如 我 们 给 下 面 的 文字 加 上 下 划 线 和 上 划 线 ， 代 码 如 下 : 


<html> 
<head> 
<title>text-decoration 属性 </title> 
<STYLE type="text/css"> 
p { text-underline-position: above; text-decoration: underline overline; } 
</STYLE> 
</head> 
<body> 
<p > 开 夜 的 天 窗 ， 对 着 划 过 的 流星 许 下 永恒 的 祝愿 ， 不 变 的 诺言 。 在 每 个 人 的 心底 ， 都 有 最 美好 
的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 
让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 
</p> 
</body> 
</html> 


在 浏览 器 中 运行 上 述 文件 ， 会 看 到 如 图 4-12 所 示 的 效果 。 
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4-12 ”设置 text-underline-position 属性 的 实例 运行 效果 
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3. text-shadow 


text-shadow 属性 用 于 设置 或 检索 对 象 中 文本 的 文字 是 否 有 阴影 及 模糊 效果 ; 可 以 设 定 多 组 
效果 ， 方 式 是 用 逗号 隔 开 ， 可 以 用 于 伪 类 :firstletter 和 :first-line。 它 的 属性 值 有 三 个 ， 分 别 是 
color、length 和 opacity， 效 果 描 述 如 表 4-6 所 示 。 


表 4-6 text-shadow 属性 的 取 值 与 描述 


属性 值 效果 描述 

color 用 于 指定 字体 阴影 的 颜色 

length 指定 字体 阴影 的 水 平和 垂直 延伸 距离 ， 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 可 为 负 值 
a 指定 模糊 效果 的 作用 距离 ， 如 果 仅仅 需要 模糊 效果 ， 将 length 设 为 0 即 可 ， 由 浮 点 数 和 单位 


标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 
语法 如 下 : 


text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或 none | <color> 
[<color> 1]* 


下 面 我 们 来 看 看 这 三 种 属性 值 的 效果 吧 。 代 码 如 下 : 


<title>text-shadow 属性 </title> 
<STYLE type="text/css"> 
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } 
</STYLE> 
</head> 
<H1> 
Dreams 
</H1> 
<div style="text-shadow:5px 2px 6px #000;"> 
<p >Hold fast to dreams For if dreams die Life is a broken-winged bird That 
cannot fly </p> 
<p >Hold fast to dreams For when dreams go Life is a barren field Frozen 
with snow </p> 


</div 
在 正 6、 正 7、IE 8 版 本 中 都 不 支持 text-shadow 属性 ， 在 Chrome 浏览 器 下 运行 的 效果 如 
图 4-13 所 示 。 


py/ 稿 /CSS/ 修 可 的 书 柱 / 羡 芭 /人 芒 


4-13 设置 text-shadow 属性 的 实例 运行 效果 


sf) >> 


4. text-transform 
text-transform 属性 设 定 文本 字体 的 大 小 写 转换 。 该 属性 有 4 种 属性 值 ， 如 表 4-7 所 示 。 
表 4-7 text-transform 属性 的 取 值 与 描述 


属性 值 效果 描述 
none 默认 值 ， 对 文本 无 任何 转换 
capitalize 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 
uppercase 转换 成 大 写 
lowercase 转换 成 小 写 


该 属性 仅 作用 于 字符 型 文本 ， 语 法 如 下 : 
text-transform : none | capitalize | uppercase | lowercase 
下 面 通过 一 个 实例 来 演示 大 小 写 转换 的 效果 ， 代 码 如 下 


<html> 
<head> 
<style type="text/css"> 
hl {text-transform: none} 
p.uppercase {text-transform: uppercase} 
p.lowercase { text-transform: lowercase} 
p.capitalize {text-transform: capitalize} 
</style> 
</head> 
<body> 
<h2> 
<p class="uppercase">Dreams</p> 
<p class="lowercase">Hold fast to dreams For if dreams die Life isabroken-winged 
bird That cannot fly </p> 
<p class="capitalize">Hold fast to dreams For when dreams go Life is a barren 
field Frozen with snow </p></h2> </body> 
</html> 


在 浏览 器 中 查看 该 页 面 的 效果 ， 如 图 4-14 所 示 。 


4-14 设置 text-transform 属性 的 实例 运行 效果 
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4.3.2 ”实例 描述 


在 设计 个 性 网 站 时 ， 常 常 希望 能 够 突出 地 显示 主要 信息 ， 比 如 使 用 字体 的 装饰 效果 、 阴 影 
等 ， 下 面 就 来 实现 一 个 有 个 性 的 网 页 文章 吧 。 


4.3.3 ”实例 应 用 


【 例 4-3】 网 页 文章 一 一 感怀 秋天 

在 这 个 实例 中 , 我 们 通过 字体 装饰 属性 text-decoration、 text-shadow、 text-underline-position、 
text-transform 来 对 网 页 中 的 字体 进行 修饰 ， 以 达到 很 好 的 视觉 效果 。 下 面 我 们 将 一 步 一 步 地 实 
现 这 个 实例 。 

(1) div 布局 页 面 。 为 了 达到 效果 我 们 使 用 div 进行 布局 ， 把 一 个 div 放 入 #div_body 里 ， 
使 用 #div_left 来 控制 属性 ， 代 码 如 下 : 


<div id="div body"> 

<p>g&nbsp; </p> 

<div id="div left"> 

<hl style="text-shadow:5px 2px 6px #000;"> 感 怀 秋天 </h1> 

<h3> 季 节 变 换 ， 生 命 轮回 ， 风 瑟 雨 萧 ， 秋 色 覆 没 了 春 的 莲 勃 苗 壮 和 夏 的 缤纷 绚丽 ， 又 一 个 秋天 来 了 。 
天 高 高 的 ， 云 闲 闲 的 ， 百 花 凋 零 众 芳 飘落 ， 生 命 在 不 经 意 间 慢 慢 枯 去 ， 一 切 都 在 悄悄 地 改变 。 自 古 着 秋 
悲 疯 寥 ， 秋 天 是 一 个 淡泊 的 时 节 ， 是 一 个 善于 感怀 的 时 节 。 

</h3> 

</div> 
</div> 


(2) 定义 CSS 样式 规则 。 
@ 定义 主体 body 样式 。 设 置 背 景 颜 色 为 村 AF3D8， 代 码 如 下 : 


body { 
background-color: #FAF3D8; 
} 


@ 定义 div 样式 。 如 添加 背景 图 片 、div 的 位 置 等 。 以 下 是 页 面 中 两 个 div 的 样式 代码 : 


#div body { 
width: 670px; 
height:600px; 
background-image: 
url(../../%E8%83%8CS$E6%99%AFSES5SIBSBESE7S89%87/http imgload24.jpg); 
background-attachment: scroll; 


margin-left:170px; 
} 
#div leftf{ 
margin-top: 150px; 
width: 400px; 
height: 400px; 
上 


mw >> 


图 定义 文章 标题 样式 。 如 字体 类 型 、 大 小 等 ， 代 码 如 下 : 


<hl style="text-shadow:5px 2px 6px #0007"> 感 怀 秋天 </h1> 
hi{ 

font-family: "宋体 "; 

font-size: 24px; 

font-style: normal; 

font-weight: bolder; 

text-transform: none; 

text-decoration: underline; 

color: #F60; 

text-align: center; 


} 
图 定义 文章 主体 样式 。 如 字体 大 小 、 字 体 阴 影 等 ， 代 码 如 下 : 


h3{ 
font-family: "新 宋体 "; 
font-size: 18px; 
font-style: italic; 
line-height: 60px; 
font-weight: 200; 
font-variant: normal; 
text-transform: none; 
color: #F33; 
text-shadow:5px 2px 6px #000; 


4.3.4 ”运行 结果 


将 写 好 的 页 面 在 浏览 器 中 运行 ， 效 果 如 图 4-15 所 示 。 
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4-15 ”网 页 文章 实例 运行 效果 
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4.3.5 实例 分 析 


让 源码 解析 : 


在 本 实例 中 ,采用 了 div 布局 和 CSS 字体 的 阴影 、 下 划 线 等 效果 对 文字 进行 修饰 ， 才 达到 
我 们 需要 的 效果 。 字体 的 这 些 属性 可 以 使 我 们 的 文章 在 一 个 页 面 中 以 很 好 的 结构 和 独特 样式 展 
现 出 来 。 


4.4 设置 字体 间隔 


在 设计 网 页 时 ， 字 体 的 间隔 设置 为 多 大 才能 使 页 面 更 加 美观 ， 更 出 效果 。 这 是 网 页 设计 人 
员 需 要 重视 的 一 个 问题 。 
oe 视频 教学 : 光盘 /视频 /4/4.4 Welcome to Beijing.avi 长度: 3 分 钟 


4.4.1 基础 知识 一 一 字体 间隔 
在 这 里 我 们 需要 用 到 字体 的 间隔 属性 letter-spacing 和 word-spacing， 这 两 个 属性 都 适用 于 
页 面 所 有 的 元 素 。 
1. letter-spacing 
letter-spacing 属性 用 于 设 定 字符 间距 ， 将 指定 的 间隔 添加 到 每 个 文字 之 后 ， 但 最 后 一 个 字 
将 被 排除 在 外 。 它 有 两 个 属性 值 normal 和 length， 如 表 4-8 所 示 。 
表 4-8 letter-spacing 属性 的 取 值 与 描述 


属性 值 效果 描述 


i | 默认 值 ， 设 置 默认 间隔 


length 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 


使 用 letter-spacing 属性 可 以 对 字符 进行 缩放 ， 如 果 在 该 属性 中 使 用 负 值 ， 则 字符 将 重合 在 
一 起 ， 如 以 下 代码 : 


<body> 

<h2> 

<p style="letter-spacing:normal"> 正 常 字符 间距 </p> 

<p style="letter-spacing:8px"> 字 符 间 距 为 8</p> 

<p style="letter-spacing:3px"> 字 符 间 距 为 -3， 字 符 就 重合 在 一 起 </p> 
</h2> 

</body> 


在 浏览 器 中 运行 这 些 代码 的 效果 如 图 4-16 所 示 。 
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2. word-spacing 


word-spacing 属性 用 来 设置 词 与 词 之 间 的 间距 ， 它 也 有 normal 和 length 两 个 属性 值 ， 如 
表 4-9 所 示 。 


图 4-16 设置 letter-spacing 属性 的 实例 运行 效果 
表 4-9 word-spacing 属性 值 


默认 值 ， 设 置 默认 间隔 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 


word-spacing 属性 可 以 接收 正 的 或 负 的 长 度 值 ， 该 长 度 值 用 于 设 定 文本 中 词 与 词 之 间 的 距 
离 。 该 属性 的 默认 值 为 normal， 表 示 间 距 为 0。 例 如 ， 有 如 下 样式 规则 定义 单词 之 间 的 间距 ， 
代码 如 下 : 


<p style="word-spacing:normal">Welcome to my CSS</pP> 
<p style="word-spacing:10px">Welcome to my CSS</p> 


在 浏览 器 中 查看 页 面 效 果 如 图 4-17 所 示 。 
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4-17 设置 word-spacing 属性 的 实例 运行 效果 
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如 果 在 该 属性 值 中 使 用 负 值 ， 将 会 使 单词 之 间 更 加 紧凑 ， 如 设置 word-spacing 属性 值 为 
-8px， 效 果 如 图 4-18 所 示 。 
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4-18 ”单词 间距 为 负 值 的 实例 运行 效果 


4.4.2 ”实例 描述 


字体 间隔 属性 在 页 面 中 时 常会 用 到 ， 可 以 根据 人 的 阅读 习惯 ， 适 当地 调整 字体 的 间隔 。 下 
面 我 们 来 看 一 个 实例 ， 通 过 这 种 实例 ， 主 要 学 习 CSS 的 字体 间隔 属性 。 


4.4.3 实例 应 用 


【 例 4-4】Welcome to Beijing 

在 这 个 实例 中 ， 通 过 word-spacing、letter-spacing 属性 来 控制 文章 中 字体 与 字体 ， 词 与 词 
之 间 的 间隔 ， 下 面 将 实现 这 个 实例 。 

(1) 文章 标题 样式 : 定义 字符 间距 为 Spx， 内 容 放 在 <h1> 标 签 内 ， 代 码 如 下 : 


hi{ 
letter-spacing:S5px; 
} 


(2) 定义 文章 内 容 样式 ;设置 单词 间距 为 3px， 代 码 如 下 : 


Bf{ 
word-spacing:3px;} 


4.4.4 ”运行 结果 


将 编写 好 的 页 面 在 浏览 器 中 运行 ， 结 果 如 图 4-19 所 示 。 
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4-19 间隔 实例 运行 效果 


4.4.5 “实例 分 析 


ns 


在 本 实例 中 ， 主 要 讲解 字体 间隔 ， 页 面 的 布局 和 上 一 节 相 同 ， 使 用 div 进行 布局 和 控制 。 
在 页 面 中 ， 文 章 标题 部 分 使 用 letter-spacing 来 定义 字符 间隔 样式 。 


45 行 高 


大 片 密密麻麻 的 文字 往往 会 让 人 觉得 乏味 , 因此 适当 地 调整 行 高 (line-height) 可 以 降低 阅读 
的 困难 与 枯燥 ， 并 且 使 页 面 显得 美观 。 


上 视频 教学 : 光盘 /视频 /4/4.5” 行 高 .avi 图 长 度 : 5 分 名 


4.5.1 基础 知识 一 一 字体 行 高 


行 高 指 的 是 文本 行 的 基线 间 的 距离 ， 但 是 文本 之 间 的 空白 距离 不 仅仅 是 由 行 高 决定 的 ， 同 

受 字 号 的 影响 。 我 们 可 以 通过 CSS 的 line-height 属性 来 设置 行 高 。 

line-height 属性 用 来 设置 行 间 距 。 事 实 上 ， 这 一 属性 决定 了 内 容 行 垂 直 高 度 所 能 增 减 的 数 
值 。 那 么 ， 行 间距 到 底 是 如 何 应 用 的 呢 ? 

网 页 中 的 每 个 元 素 都 有 一 个 内 容 区 域 ， 该 内 容 区 域 是 由 字体 尺寸 决定 的 。 内 容 区 域 中 又 包 
含 了 内 联 框 ， 内 联 框 的 范围 就 是 内 容 区 域 。 行 间距 则 可 以 增 减 内 联 框 的 高 度 ， 这 是 通过 将 行 间 


给 


Wd 
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距 分 为 两 半 , 再 将 每 个 半 行 间距 应 用 于 内 容 区 域 的 项 部 和 底部 来 实现 的 , 而 这 又 构成 了 内 联 框 。 
例如 ， 设 定 内 容 区 域 为 20px， 行 间距 为 30px， 则 两 者 的 差 值 10px 将 分 为 两 半 ， 将 每 一 半 (5px) 


分 别 应 用 到 内 容 区 域 的 项 部 和 底部 ， 就 得 到 30px 高 的 内 联 框 。 简 而 言 之 ， 行 间距 就 是 内 容 区 


域 最 底 端 与 其 内 部 项 端 之 间 的 距离 。 


line-height 的 属性 值 也 有 两 个 ， 分 别 是 normal 和 length， 如 表 4-10 所 示 。 


表 4-10 line-height 属性 的 取 值 与 描述 


属性 值 效果 描述 


length 


normal 默认 值 ， 设 置 默 认 行 高 


百分比 数值 和 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 ， 其 百分比 取 值 是 基于 字 
体 的 高 度 尺 寸 


在 上 面 的 属性 值 中 ， 最 常用 的 是 直接 设置 高 度 和 使 用 默认 值 ， 代 码 如 下 : 


<div class="box grey" style="font-size:18px"> 
<h3><img src="images/page notice.gif" width="19px" 

height="16px"” alt="textbox"” /> <strong> 神 奇 亚运 会 </strong></h3> 

<p style="line-height:normal"> 亚 运 ， 曾经 在 多 少 人 心中 燃烧 过 希望 ， 在 多 少 
人 的 手中 传递 过 梦想 。 因 为 这 个 梦想 ， 有 火热 的 情感 ， 有 奔涌 的 热血 ， 有 苦 甜 的 汗水 。 每 一 个 路 标 都 刻 
下 关于 梦想 的 预言 ， 因 为 这 个 梦想 ， 用 微笑 迎接 闪电 ， 用 坦然 面 对 狂 风 ， 心 底 里 不 熄 的 永远 是 那 一 炬 炽 
热 的 火炬 ， 跳 动 的 火焰 。 
</p> 
<p style="line-height:50px"> 亚 运 ， 曾 经 在 多 少 人 心中 燃烧 过 希望 ， 在 多 少 人 的 手中 传递 过 梦 
想 。 因 为 这 个 梦想 ， 有 火热 的 情感 ， 有 奔涌 的 热血 ， 有 苦 甜 的 汗水 。 每 一 个 路 标 都 刻下 关于 梦想 的 预言 ; 
为 这 个 梦想 ,用 微笑 迎接 闪电 , 用 坦然 面 对 狂 风 , 心底 里 不 熄 的 永远 是 那 一 炬 炽热 的 火炬 ， 跳 动 的 火焰 。 
</p> 


设 定 行 间距 的 单位 有 px、pt、cm、mm 等 ， 用 户 可 以 使 用 不 同 的 单位 进行 设置 。 在 浏览 器 


中 查看 页 面 ， 如 图 4-20 所 示 。 
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4-20 设置 line-height 属性 的 实例 运行 效果 
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4.5.2 ”实例 描述 


我 们 在 看 新 闻 网 页 时 ， 新 闻 版 面 段落 的 行 与 行 之 间 的 间距 非常 恰当 ， 这 一 般 是 通过 CSS 
行 高 属性 来 控制 的 ， 下 面 就 简单 地 做 一 个 新 闻 版 面 。 


4.5.3 实例 应 用 


【 例 4-5】 新 闻 版 面 

我 们 所 要 学 习 的 版 面 的 控制 格式 还 是 通过 div 来 控制 的 ,这 个 实例 主要 通过 对 行 高 的 控制 ， 
来 使 文章 段落 看 起 来 美观 ， 下 面 来 一 步 步 地 实现 吧 。 

(1) div 布局 页 面 。 在 divl 里 放 入 上 下 两 层 div， 分 别 是 div_ top 和 div_xia， 下 层 div 里 又 
分 两 层 div， 分 别 为 divl 和 div2， 这 两 层 写 入 新 闻 的 内 容 。 代 码 如 下 : 


<div id="divl"> 

<div id="div top"><table width="100%" border="1"> 

<tr> 

<td align="center"><hl id="artibodyTitle" pid="1" tid="1" did="21602876" 

fid="1666"> 阿 桑 奇 被 捕 后 维基 解密 再 曝光 近 百 份 文件 </h1></td> 

< Er 
</table> 
</div> 
<div id="div xia"> 
<div id="div 1"> 
<p> 环 球 网 记者 梁 旭 报道 12 月 7 日 ,维基 解密 创始 人 阿桑 奇 在 伦敦 遭 拘捕 后 该 网 站 再 次 曝光 最 新 文件 ， 
包括 97 份 美国 议会 的 最 新 机 密 电文 。 俄 塔 斯 社 报道 称 ， 上 述 文件 涉及 美国 驻 马 德里 大 使 馆 和 驻 里 约 热 
内 卢 领 事 馆 的 相关 工作 情况 。 在 阿桑 奇 被 捕 后 ， 维 基 解 密 网 站 表示 仍 将 继续 公布 他 们 掌握 的 251287 份 
涉及 美国 议会 的 文件 ， 但 这 
需要 几 个 月 时 间 。</p> 

<p> 俄 塔 斯 社 报道 称 ， 上 述 文件 涉及 美国 驻 马 德 里 大 使 馆 和 驻 里 约 热 内 卢 领 事 馆 的 相关 工作 情况 。 
在 阿桑 奇 被 捕 后 ， 维 基 解 密 网 站 表示 仍 将 继续 公布 他 们 掌握 的 251287 份 涉及 美国 议会 的 文件 ， 但 这 需 
要 几 个 月 时 间 。</p> 
<p> 
报道 称 ， 维 基 解 密 曝 光 的 美国 外 交 官 电报 文件 中 15652 份 属于 “机 密 ”，101748 份 文件 属于 “保密 ” 
信息 。</p> 
</div> 
<div id="div_2"> 版 权 所 有 某 某 公 司 
</div> 
</div> 
</div> 


(2) 定义 div 的 样式 。 主 要 定义 字体 大 小 、 颜 色 、 行 高 及 布局 等 样式 。 代 码 如 下 : 


#divl { 
font-size: 18px; 


font-style: normal; 


< 人 mm 
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line-height: 1l0px; 
font-weight: bold; 


} 

#div topt{ 
font-family: "宋体 "; 
font-size: 18px; 
line-height: normal; 
font-weight: 700; 
font-variant: normal; 
text-transform: none; 
color: #FFF; 

} 

#div xiaf 
font-family: "新 宋体 "; 
font-size: 18px; 
line-height:30px; 
font-weight: bold; 
color: #ccc; 
position: absolute; 
text-align: center; 

} 

#div 1{ 
text-align: center; 


下 
基本 的 样式 就 这 么 多 ， 可 以 看 到 在 #div_xia 中 我 们 定义 行 高 属性 line-height 为 30px。 


4.5.4 ”运行 结果 


将 做 好 的 网 页 在 浏览 器 中 运行 ， 可 以 看 到 以 下 效果 ， 如 图 4-21 所 示 。 


4-21 ”新 闻 版 面 实例 运行 效果 
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4.5.5 ”实例 分 析 


pe 


以 上 实例 我 们 通过 div 和 CSS 的 样式 实现 一 个 新 闻 版 面 , 在 此 页 面 中 我 们 单独 对 行 元 素 添 
加 样式 ， 也 就 是 CSS 的 line-height 属性 。 通 过 此 属性 可 以 控制 行 与 行 之 间 的 高 度 。 


4.6 常见 问题 解答 


4.6.1 字体 名 称 样式 的 问题 


字体 名 称 样式 font-family 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12407-1-1.html 


网 站 导航 我 想 采用 华文 彩云 或 幼 圆 字体 或 其 他 字体 ， 怎 么 让 它 表 现 得 和 Photoshop 里 的 形 
式 一 样 呢 ( 边 缘 也 很 光滑 的 那 种 )? 我 现在 设置 的 字体 加 粗 了 但 边缘 都 很 粗糙 ， 不 知 为 什么 ? 

【解决 办 法 】 首 先 肯定 地 告诉 你 ， 绝 对 不 能 用 CSS 来 制作 任何 特殊 的 非 系统 字体 ， 你 自 
己 装 的 那些 别人 是 看 不 见 的 。 我 们 最 好 使 用 CSS 中 的 滤 镜 来 解决 。 


4.6.2 italic 和 oblique 的 问题 


italic 和 oblique 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12418-1-1.html 


italic 和 oblique 的 英文 意思 一 样 ， 网 页 中 显示 一 样 ， 为 什么 弄 俩 一 样 的 ? 请 高 手 讲 讲 ， 
谢谢 ! 

【解决 办 法 】italic 是 斜体 文本 ， 它 除了 倾斜 normal 文本 外 ， 可 能 会 在 每 个 字母 上 做 点 小 
变化 以 获得 外 观 的 变化 ，oblique 是 倾斜 文本 ， 它 只 是 normal 文本 的 倾斜 。 有 些 字体 有 这 两 种 
字体 的 区 别 ， 但 是 大 部 分 字体 不 区 分 italic 和 oblique， 即 使 有 字体 上 的 区 分 ， 也 很 少 有 浏览 器 
能 够 区 分 它们 之 间 的 差别 。 


4.6.3 ”字体 大 小 问题 


| 磊 王 字体 大 小 写 代码 问题。 


[全 细 ”网络 课堂 : http:/bbs.itzcn.comy/thread-12419-1-1.html 
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以 下 是 我 写 好 的 CSS 代码 : 
body{ 
background:#F6FEE9; 
4 
#container { 
background:url (img/top.jpg) repeat fixed center 0; 
} 


该 代码 可 以 实现 在 IE9 中 显示 一 张 背 景 图 片 , 但 是 现在 如 何 加 入 些 代码 使 我 可 以 控制 网 页 


字体 ? 在 哪个 地 方 加 ? 


【解决 办 法 】 根 据 文字 所 在 的 位 置 来 确定 CSS 中 的 选择 器 。 例 如 有 一 段 文字 “<p> 你 好 


</p>” 那 么 要 想 在 CSS 里 控制 字体 就 应 该 添加 这 样 的 CSS 代码“p{font-size: 属 性 值 ;font-family: 
属性 值 ，font-color: 属 性 值 ，}”。 这 行 CSS 代码 可 以 控制 字号 、 字 体 、 颜 色 的 。 当 然 其 它 的 文 
本 属性 可 以 模仿 着 写 上 就 可 以 了 。 


47 习 题 

1. 填空 题 
(1) font-style 属性 用 于 定义 字体 显示 的 样式 ， 它 的 三 种 可 选 属性 值 是 normal、italic、 
(2) 在 设置 字符 间距 时 应 该 用 属性 。 
(3) 是 设置 字体 的 综合 属性 。 
2. 选择 题 
(1) 以 下 关于 font 标记 符 的 说 法 中 ， 错 误 的 是 

A. 可 以 使 用 color 属性 指定 文字 颜色 

B. 可 使 用 size 属性 指定 文字 大 小 

C.， 指定 字号 时 可 以 使 用 1 一 7 的 数字 

D. 语句 “<font size="+2"> 这 里 是 2 号 字 </font>” 将 使 文字 以 2 号 字 显 示 
(2) 用 实现 字体 的 阴影 及 模糊 效果 。 

A. text-decoration B. font-weight 

C. text-shadow D. font-family 
(3) 以 下 不 是 text-transform 的 属性 值 。 

A. lowercase B. opacity 

C. uppercase D. capitalize 
3. 上 机 练习 


上 机 练习 : 使 用 Dreamweaver 创建 一 个 简单 的 页 面 ， 其 中 要 用 到 字体 的 属性 。 
通过 本 章 的 学 习 ， 我 们 知道 字体 在 页 面 中 的 应 用 是 最 多 的 ， 本 次 上 机 练习 也 主要 是 针对 字 


mf >> 


要 求 读者 实现 如 图 4-22 所 示 的 页 面 效果 。 


图 4-22 练习 效果 


< 人 mm 


内 容 摘要 : 

文本 表示 的 是 页 面 所 包含 的 内 容 , 文本 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 以 及 
风格 。CSS 样式 提供 了 文本 属性 用 于 实现 对 页 面 中 文本 的 控制 显示 。 本 章 将 对 几 种 重要 的 文本 
属性 进行 介绍 。 

学 习 目标 : 

@ 掌握 文本 对 齐 方式 属性 的 应 用 
掌握 文本 内 容 流 的 方向 应 用 
掌握 文本 的 排序 应 用 
掌握 文本 的 其 他 样式 


A 全, 开发 学 习 实录 -入 


5.1 推荐 图 书 详细 信息 


决定 段落 边缘 的 外 观 和 方向 : 左 对 齐 、 右 对 齐 、 居 中 、 两 端 对 齐 和 分 散 对 齐 。 例 如 ， 在 一 


个 左 对 齐 段落 中 (最 常见 的 对 齐 方式 ),， 段落 的 左边 缘 是 和 左 页 边 距 对 齐 的 , 本 节 将 对 text-indent 
属性 、vertical-align 属性 、text-align 属性 、white-space 属性 和 ruby-align 属性 进行 讲解 ， 同 时 
借助 推荐 图 书 详细 信息 实例 进行 讲解 。 


上 视频 教学 : 光盘 /视频 /5/5.1 推荐 图 书 详细 信息 人 长 度 : 6 分 名 


5.1.1 基础 知识 一 一 text-indent 属性 


在 网 页 设计 中 ， 段 落 首 行 缩 进 是 必 不 可 少 的 样式 。 因 此 CSS 也 考虑 到 了 这 点 ， 通 过 使 用 


text-indent 属性 可 以 实现 文本 首 行 缩 进 的 效果 。 


text-indent 属性 中 有 两 种 不 同 的 缩 进 方式 ， 一 种 直接 定义 缩 进 长 度 ， 另 一 种 则 是 定义 缩 进 


的 百分比 ， 详 细 代码 如 下 所 示 。 


<p style="text-indent:10mm">XML 是 一 种 描述 数据 和 数据 结构 的 语言 ， 可 以 保存 在 任何 可 以 存 
储 文本 的 文档 中 。 本 书 主要 介绍 了 xML 的 产生 历史 和 特点 ，xML 的 基本 语法 和 编辑 工具 ，xML 的 运行 环 
境 ， 约 束 性 文档 DTD，xML Schema，XML 在 显示 时 的 样式 语言 csSs 和 XSI，XML 文档 接口 DOM、sAX， 
XLink 和 数据 岛 技 术 。</p> 

<p style="text-indent:10%"> XML 是 一 种 描述 数据 和 数据 结构 的 语言 ， 可 以 保存 在 任何 可 以 存 
储 文本 的 文档 中 。 本 书 主要 介绍 了 xML 的 产生 历史 和 特点 ，xML 的 基本 语法 和 编辑 工具 ，xML 的 运行 环 
境 ,约束 性 文档 DTD，xML schema，xML 在 显示 时 的 样式 语言 css 和 XSsL，xML 文档 接口 DoM、SRX， 
XLink 和 数据 岛 技 术 。</p> 


text-indent 属性 还 有 一 种 特殊 的 缩 进 方式 一 悬挂 缩 进 。 它 可 以 使 首 行 悬 挂 在 标签 的 左边 ， 


要 实现 该 效果 只 需要 设置 属性 的 值 为 负数 即 可 ， 详 细 代码 如 下 所 示 。 


<p style="text-indent:-10mm">XML 是 一 种 描述 数据 和 数据 结构 的 语言 ， 可 以 保存 在 任何 可 以 存 
储 文本 的 文档 中 。 本 书 主要 介绍 了 xML 的 产生 历史 和 特点 ，xML 的 基本 语法 和 编辑 工具 ，xML 的 运行 环 
境 ， 约 束 性 文档 DTID，XML Schema，XML 在 显示 时 的 样式 语言 CSS 和 XsL，XML 文档 接口 DOM、sAX， 
XLink 和 数据 岛 技 术 。</p> 


上 述 代码 中 如 果 属 性 值 为 负数 ， 则 前 面 的 部 分 内 容 被 浏览 器 窗口 挡住 ， 我 们 可 以 设置 


padding-left 属性 ， 使 内 容 显示 完全 。 


在 布局 中 如 果 上 级 标签 标记 定义 了 text-indent 属性 ， 那 么 在 该 标签 之 内 的 所 有 标签 则 都 会 


继承 上 级 标签 标记 定义 的 属性 值 。 


$ text-indent 属性 属性 值 可 以 使 用 绝对 长 度 单位 ， 例 如 cm、mm 等 ， 还 可 以 使 用 相 
缚 示 | 。 对 长 度 单 位 ， 例 如 em、px 等 。 
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5.1.2 ”基础 知识 一 一 vertical-align 属性 


在 XHTML 中 ，<sup> 和 <sub> 标 签 用 来 显示 页 面 中 的 上 标 和 下 标 。 同 样 CSS 也 有 这 样 的 
属性 来 控制 显示 内 容 的 垂直 对 齐 方式 ， 那 就 是 vertical-align 属性 。 该 属性 仅 对 table 有 效 ， 或 
者 可 以 说 是 仅 对 td 有 效 。div、ul、li、 Pp 等 容器 的 竖 直 方向 永远 是 顶端 对 齐 的 。 

vertical-align 属性 有 9 个 预 设 值 ， 用 来 控制 标签 内 容 的 对 齐 方式 ， 属 性 值 如 下 所 示 。 

@ auto: 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 。 

@ baseline: 默认 值 。 将 支持 valign 特性 的 对 象 的 内 容 与 基线 对 齐 。 

@ sub: 年 直 对 齐 文本 的 下 标 。 

@ super: 垂直 对 齐 文本 的 上 标 。 

@ top: 将 支持 valign 特性 的 对 象 项 端 对 齐 。 

@ textrtop: 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶端 对 齐 。 

@ middle: 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 。 

@ bottom: 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 。 

@ text-bottom: 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 。 

为 了 更 好 地 让 属性 值 在 页 面 上 显示 理想 的 效果 ， 这 次 将 通过 使 用 上 下 标 、 顶 端 对 齐 、 底 部 
对 齐 三 种 方式 进行 讲解 。 

1. 上 下 标 方 式 


首先 简单 地 介绍 一 下 基线 对 齐 方 式 baseline。 基 线 对 齐 方式 在 页 面 中 同 其 他 文本 内 容 的 显 
示 差 别 不 大 。 上 下 标 在 页 面 的 数学 运算 或 注释 标号 中 使 用 得 比较 多 ， 详 细 代 码 如 下 所 示 。 
<p> 
北京 <b style="font-size:pt;vertical-align:super">2008</b> 
奥运 <b style="font-size:8pt;vertical-align:sub"> [注释] </b> 
加 油 ! <img src="1.gif" style="vertical-align:baseline"> 
</p> 
在 实际 应 用 中 ， 上 下 标 对 齐 方式 的 字体 通常 情况 下 都 会 比 正常 的 字体 小 ， 它 主要 起 到 一 个 
标注 的 作用 。 


2. 顶端 对 齐 方式 

顶端 对 齐 又 分 为 两 种 参照 方式 ， 一 种 是 参照 整个 文本 块 ， 一 种 是 参照 文本 。 下 面 我 们 通过 
一 个 简单 的 代码 了 解 一 下 该 如 何 使 用 顶部 对 齐 方式 ， 详 细 代 码 如 下 所 示 。 

<p> 


<img src="xin.gif" style="vertical-align:middle"/> 
北京 ! 奥运 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 
</p> 
<hr/> 
<p> 


<img src="xin.gif" style="vertical-align:middle"/> 


<@—— 


北京 ! 奥运 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 
</p> 
在 上 述 代 码 中 ， 我 们 采用 了 middle 中 间 对 齐 方式 。 将 第 一 个 段落 中 第 二 张 图 片 的 
vertical-align 属性 值 为 top, 表示 该 图 片 要 与 包含 它 的 文本 块 顶端 对 齐 。 将 第 二 个 段落 中 的 第 二 
张 图 片 的 vertical-align 值 设置 为 text-top， 表 示 该 图 片 要 与 所 在 的 文本 块 中 的 文本 顶端 对 齐 。 
3. 底部 对 齐 方 式 
底部 对 齐 方 式 和 在 上 面 讲述 的 顶部 对 齐 方式 一 样 , 分 别 参 照 文 本 块 与 文本 块 中 包含 的 文本 
块 为 实例 ， 详 细 代 码 如 下 所 示 : 
<p> 
<img src="xin.gif" style="vertical-align:middle"/> 
北京 ! 奥运 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 
</p> 
<hr/> 
<p> 
<img src="xin.gif" style="vertical-align:middle"/> 
北京 ! 奥运 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
</p> 


人 | vertical-align 属性 不 能 应 用 于 表格 单元 格 中 的 内 容 的 对 齐 . 
同时 ，vertical-align 属性 值 还 能 使 用 百分比 来 设 定 垂直 的 高 度 ， 它 的 高 度 具 有 相对 性 ， 是 
基于 行 高 的 值 来 计算 的 ， 而 百分比 还 可 以 使 用 正 负 号 来 表示 ， 正 号 百分比 表示 文本 上 升 ， 负 号 
百分比 表示 文本 下 降 ， 详 细 代码 如 下 所 示 : 
<p> 
北京 <b style="font-size:pt;vertical-align:100%">2008</b> 
奥运 <b style="font-size:8pt;vertical-align:-100%">[ 注 释 ] </b> 
加 油 ! <img src="1.gif" style="vertical-align:baseline"> 
<p> 


5.1.3 ”基础 知识 一 一 text-align 属性 


text-align 属性 的 主要 作用 是 用 来 设置 文本 的 水 平 对 齐 方式 。 同 样 它 也 有 4 种 对 齐 方式 :left、 
center、 right 和 justify。 

@ left: 表示 向 左 对 齐 。 

@ center: 文本 居中 。 

@ right: 表示 向 右 对 齐 。 

@ justify: 表示 两 端 对 齐 方式 。 

当 我 们 为 其 指定 值 时 ， 默 认 对 齐 方式 是 向 左 对 齐 。 

通常 情况 下 ， 居 中 对 齐 方式 使 用 在 标题 类 的 文本 中 ， 其 他 对 齐 方式 可 以 根据 页 面 布局 来 选 
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择 使 用 ， 下 面 通过 一 些 简单 的 实例 来 讲解 如 何在 页 面 中 使 用 ， 详 细 代 码 如 下 所 示 : 


<body> 
<hl style="text-align:center"> 静 夜 思 </h1> 
<h3 style="text-align:left"> 作 者 : </h3> 
<h3 style="text-align:right"> 李 白 </h3> 
<p style="text-align:justify"> 
床 前 明月 光 ， 
疑 是 地 上 霜 。 
举 头 望 明月 ， 
低头 思 故 乡 。 
</p> 
</body> 
通过 上 述 代 码 将 一 首 李 白 的 《静夜 思 》 作 为 内 容 进 行 排版 ， 标 题 使 用 center 属性 值 进行 居 
中 显示 。 而 “作者 ” 则 是 使 用 left 向 左 对 齐 ，“ 李 白 ” 使 用 右 对 齐 方式 ， 详 细 内 容 则 采用 两 端 
对 齐 方 式 ， 通 过 这 样 的 排列 我 们 就 按照 古诗 的 排列 方式 将 《静夜 思 》 有 规律 地 排列 好 了 。 
text-align 属性 设置 的 对 齐 方式 , 不 仅 可 以 使 标签 中 的 文本 内 容 按照 指定 的 方式 对 齐 。 同 时 
还 可 以 对 标签 中 的 文本 、 图 片 应 用 对 齐 方式 。 下 面 我 们 还 是 通过 使 用 上 述 诗 名 排列， 详细 代码 
如 下 所 示 : 
<body> 
<hl style="text-align:center"> 静 夜 思 </hl1> 
<h3 style="text-align:left"> 作 者 : </h3> 
<img src="libai.jpg"/> 
<h3 style="text-align:right"> 李 白 </h3> 
<p style="text-align:justify"> 
床 前 明月 光 ， 
疑 是 地 上 和 霜 。 
举 头 望 明月 ， 
低头 思 故 乡 。 
</p> 
</body> 
text-align 属性 只 能 适用 于 文本 块 ， 而 不 能 直接 应 用 到 图 片 标签 中 。 如 果 要 使 用 图 片 同文 本 
一 样 应 用 对 齐 方式 ， 那 么 必须 将 图 像 包 含 在 文本 块 中 。 
6 》 CSS 只 能 定义 两 端 对 齐 方式 ， 并 按照 要 求 显示 ， 但 对 于 具体 的 两 端 对 齐 文本 如 何 
提示 | 。 分配 字体 空间 以 实现 文本 左右 两 边 均 对 齐 ，CSS 并 不 规定 ， 这 就 需要 设计 者 自行 
省: 站 省 


5.1.4 ”基础 知识 一 一 white-space 属性 


white-space 属性 就 是 空白 属性 ， 该 属性 对 文本 的 显示 有 着 重要 的 影响 。 在 标签 上 应 用 
white-space 属性 可 以 影响 浏览 器 对 字符 串 或 者 文本 间 空 白 的 处 理 方式 。 
在 XHTML 中 已 经 实现 了 将 多 余 的 空白 忽略 而 保留 一 个 空白 的 方法 ， 代 码 语法 如 下 所 示 : 


<O— 


<p> 窗 内 网 欢 迎 您 !</p> 
该 文本 显示 时 ， 会 将 各 文字 中 间 的 多 个 空格 缩写 为 一 个 空格 显示 出 来 ， 输 出 在 页 面 的 信息 


如 下 所 示 : 


窗 内 网 欢迎 您 ! 
如 果 要 保留 空白 ， 则 必须 使 用 CSS 提供 的 white-space 属性 。 该 属性 有 三 个 可 选 属性 值 分 


别 为 : pre、nowrap 和 normal。pre 表示 文本 间 的 空白 不 忽略 。nowrap 表示 文本 内 容 不 允许 换 
行 ， 除 非 使 用 hr 元 素 实现 换行 。normal 表示 按 正 常 显示 ， 文 本 间 多 余 的 空白 将 被 忽略 。 下 面 


我 们 通过 一 段 代码 来 演示 如 何 应 用 white-space 属性 ， 详 细 代 码 如 下 所 示 : 


<body> 

<hl style="color:red; text-align:center;white-space:pre"> 窗 内 网 欢 
迎 您 UR 
<div style="white-space:nowrap;text-indent:10mm"> 

<p> 
窗 内 网 是 由 郑州 汇 智 计算 机 技术 服务 有 限 公司 创建 的 一 个 免费 视频 教程 网 站 ， 成 立 于 2002 年 。 致 力 于 
把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 。 全 面 提供 企业 管理 
ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关系 管理 软件 、 小 型 企业 管理 软件 以 及 
网 站 建设 服务 提供 商 。 

</p> 

<p> 

窗 内 网 结合 软件 开发 和 网 站 建设 的 实际 需求 ， 发 布 了 Flex、cC#、Java、ASP 和 JSP 等 系列 

视频 教程 。<br> 
我 们 投入 大 量 资源 , 录制 了 更 多 IT 教学 视频 教程 , 包括 SQL Server、 PHP、AJAX、 Eclipse、Struts、 
Netbeans、JSF、Hibernate 等 开发 技术 ， 以 及 3ds max、Maya 等 三 维 动画 与 视频 处 理 教学 视频 产 
品 等 。 早 前 ， 公 司 与 电子 工业 出 版 社 合作 编写 了 《从 入 门 到 精通 》、《 巧 学 巧 用 》、《 锦 绣 映像 》 等 系 
列 图 书 ， 得 到 了 读者 的 一 致 好 评 和 认可 ! 

</p> 
</div> 
</body> 


在 上 述 代码 中 ， 元 素 hl 中 定义 white-space 属性 值 为 pre 保留 了 各 文字 之 间 的 空白 ， 而 元 


素 div 中 定义 属性 值 为 nowrap。 其 中 div 标签 中 的 p 元 素 继承 了 该 属性 值 定义 的 样式 信息 。 在 


第 一 个 段落 中 ， 由 于 没有 换行 标记 ， 文 本 将 以 不 换行 的 方式 显示 整 段 内 容 。 而 第 二 段 文字 中 使 
用 了 <br>， 那 么 在 换行 标签 处 进行 换行 。 


5.1.5 ”基础 知识 一 一 ruby-align 属性 


ruby-align 属性 设置 或 检索 通过 rt 对 象 指定 的 注释 文本 或 发 音 指南 的 对 齐 位 置 。 同 样 该 属 


性 有 7 个 值 , 它们 分 别 是 : auto、 left、 center、 right、 distribute-letter、 distribute-space 和 line-edge。 


st >> 


@ anuto: 由 浏览 器 确定 对 齐 方式 。 对 于 ideographic( 东 亚 文本 ) 以 distribute-space 值 对 齐 。 
对 于 Latin 文本 则 采用 center 值 对 齐 。 
@ left: 根据 基本 宽度 左 对 齐 。 
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@ center: 根据 基本 宽度 居中 对 齐 。 如 果 基 本 宽度 小 于 ruby 文本 的 宽度 ， 那 么 在 ruby 文 
本 的 宽度 中 居中 基本 宽度 。 

@ right: 根据 基本 宽度 右 对 齐 。 

@ distribute-letter: 如 果 ruby 文本 的 宽度 小 于 基本 宽度 ， 则 ruby 文本 在 基本 宽度 中 均匀 
分 布 。 如 果 ruby 文本 的 宽度 大 于 或 等 于 基本 宽度 ， 居 中 对 齐 。 

@ distribute-space: 如 果 ruby 文本 的 宽度 小 于 基本 宽度 ， 则 ruby 文本 在 基本 宽度 中 均匀 
分 布 。 在 mby 文本 中 ， 在 第 一 个 字符 的 前 面 和 最 后 字符 的 后 面 有 半 个 字 距 的 空白 区 
域 。 如 果 ruby 文本 的 宽度 大 于 或 等 于 基本 宽度 ， 居 中 对 齐 。 

@ line-edge: 如 果 ruby 文本 不 相 邻 行 边缘 ， 则 其 被 居中 。 否 则 mby 文本 行 在 基本 文本 
边 的 上 方 。 

下 面 通过 一 段 简单 的 代码 来 演示 ， 该 如 何 使 用 ruby-align 属性 和 该 属性 中 的 一 些 参数 的 

应 用 。 


<body> 
<RUBY style="RUBY-ALIGN:distribute-space;"> 

<hl style="ruby-align;left"> 窗 内 网 欢 迎 您 ! </hl> 
<div style=" ruby-align;line-edge"> 

<p> 


<RT> 窗 内 网 是 由 郑州 汇 智 计算 机 技术 服务 有 限 公司 创建 的 一 个 免费 视频 教程 网 站 ， 成 立 于 2002 年 。 致 
力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 。 全 面 提供 企业 管 
理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关 系 管理 软件 、 小 型 企业 管理 软件 以 
及 网 站 建设 服务 提供 商 。<RT> 

</p> 
</div> 
</RUBY> 
</body> 


上 述 代 码 中 我 们 将 标题 mby-align 样式 设置 为 根据 基本 宽度 左 对 齐 ， 同 时 将 正文 中 的 div 
设置 为 line-edg， 如果 ruby 文本 不 与 行 边缘 相 邻 , 则 其 被 居中 。 默 认 情 况 下 该 属性 的 值 为 auto。 


”rmuby-align 属性 应 用 于 ruby 标签 中 ， 必 须 和 tt 标签 一 起 使 用 。 否 则 不 会 出 现 想 要 
经 示 | 。 的 效果 。 
5.1.6 ”实例 描述 
通过 对 一 些 基础 知识 的 学 习 ， 下 面 我 们 将 通过 窗 内 网 图 书 推荐 详细 图 书页 面 进行 添加 样 


式 , 将 该 页 面 内 的 文本 设置 为 指定 的 样式 。 比 如 指定 图 书 的 名 称 居中 , 那么 就 可 以 使 用 text-align 
属性 设置 ， 同 时 还 可 以 使 用 white-space 属性 去 掉 多 余 的 空白 等 功能 。 


5.1.7 ”实例 应 用 


【 例 5-1】 推荐 图 书 详细 信息 
首先 设置 显示 的 图 书 基 本 信息 ， 例 如 图 书 的 名 称 、 编 号 等 一 些 基本 信息 。 


< 人 Oo—— 
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<TABLE border=0 cel1Spacing=1 cellPadding=]1 width="100%" bgColor=#c6e7ff 
align=center> 
<TBODY> 
<TR> 
<TD bgColor=#f3fbff height=25 width=80 align=middle> 书 名 : </TD> 
<TD style="FONT-SIZE: 16px; 
FONT-WEIGHT: bold;text-align:left;white-space:pre;white-space:nowrap" 
bgColor=#f3fbff colspan=2 >Eclipse 3.0 从 入 门 到 精通 </TD> 
<TD bgColor=#f3fbff rowSpan=6 align=middle> 
<DIV class=pic><IMG 
src="images/20090112055110.gif"></DIV></TD></TR> 
<TR> 
<TD bgColor=#f3fbff height=25 align=middle> 书 号 ; </TD> 
<TD bgColor=#f3fbff colSpan=2 
style="text-align:left">978-7-121-06023-6</TD></TR> 
<TR> 
<TD bgColor=#f3fbff height=25 align=middle> 版 次 : </TD> 
<TD bgColor=#f3fbff colSspan=2 
style="text-align:left">2008-05</TD></TR> 
<TR> 
<TD bgColor=#f3fbff height=25 align=middle> 页 数 ， </TD> 
<TD bgColor=#f3fbff colSpan=2 style="text-align:left">504</TD></TR> 
<TR> 
<TD bgColor=#f3fbff height=25 align=middle> 定 价 : </TD> 
<TD bgColor=#f3fbff colSpan=2 style="text-align:left">58</TD></TR> 
<TR> 
<TD bgColor=#f3fbff height=25 align=middle> 下 载 : </TD> 
<TD bgColor=#f3fbff align=middle><A 
href="http://www.itzcn.com/uploadFile/book/kejian/20090112055110.gif"> 教 学 课 
件 </a> 
</TD> 
<TD bgColor=#f3fbff align=middle><A 
href="http://www.itzcn.com/uploadFile/book/anli/20090112055110.gif"> 素 材 下 载 
</R> 
</TD> 
</TR></TBODY></TABLE> 


在 上 述 代 码 中 我 们 通过 设置 white-space:nowrap 属性 避免 图 书 名 称 换行 并 去 除 多余 空 格 ， 


同时 使 用 text-align:left 属性 将 文本 设置 为 左边 对 齐 。 


接 下 来 则 设置 “内 容 要 点 ”文本 的 样式 ， 详 细 代 码 如 下 所 示 。 


<TABLE style="MARGIN-TOP: 8px; BORDER-TOP: #ff8100 3px solid" border=0 
cellspacing=] cellPadding=0 width="100%" bgColor=#cccccc align=center> 
<TBODY> 

<TR> 

<TD style="FONT-SIZE: 16px; FONT-WEIGHT: bold;text-align:left" 

bgColor=#ebebeb 
height=20>&gnbsp; 内 容 要 点 : </TD></TR> 

<TR> 


<TD bgColor=#ffffff align=middle> 
<TABLE border=0 cellSpacing=0 cellPadding=0 width="96%"> 
<TBODY> 
<TR> 
<TD></TD></TR> 
<TR> 
<TD> 
<DIV style="text-indent:1l0mm;text-align:left;">Eclipse 最 初 由 oTI 
和 IBM 两 家 公司 的 IDE 产品 开发 组 创建 。 在 目前 所 有 的 可 视 化 开发 工具 中 ，Eclipse 可 以 说 是 最 有 发 
展 前 途 的 产品 之 一 。 本 书 全 面 介绍 了 Eclipse 的 开发 调试 环境 、sWT、JFace、RCP、 Eclipse 表单 、 
Web 开发 和 插件 开发 等 。 
</DIV> 
</TD> 
</TR> 
</TBODY></TABLE> 
</TD> 
</TR> 
</TBODY></TABLE> 


在 上 述 代 码 中 ， 我 们 通过 设置 div 元 素 的 text-indent 属性 为 10mm 产生 段落 缩 进 ， 设 置 
text-align 属性 为 left 使 文本 采用 向 左 对 齐 。 


5.1.8 运行 结果 


通过 浏览 器 运行 book.html 页 面 将 会 显示 如 图 5-1 所 示 的 结果 。 


Eclipse 3.0 从 入 门 到 精通 -宇内 阿 一 视频 入 程 


[rss VS\chi\ boo Mn 
廊 收 下 天 项 telipse 3 OU 入 证 胃 - 锻 内 癌 - 视 遇 和 得 


内 容 要 点 ， 


Eclipse 最 初 由 DT 和 IBN 了 两 容 公司 的 IDE 产 品 开发 组 创建。 在 目前 所 有 的 可 祝 化 开发 工具 中 ，Eclpse 可 以 泣 是 最 一 
有 发 展 前 途 的 产品 之 一 。 本 书 全 面 介绍 了 Eclipse 的 开发 调试 环境 、SWT、 开 aca、RCP、Eciipse 表 单 、Wet 开 发 和 
拍 件 开发 等 。 


和 
人 已 完 中， 得 同 页 上 有 村 训 - 


图 5-1 图 书 推荐 详细 信息 


5.1.9 ”实例 分 析 


saw 


从 上 面 的 实例 中 我 们 可 以 看 到 ， 通 过 属性 来 改变 字体 文本 的 对 齐 方式 。 在 上 面 讲解 到 了 
text-indent 属性 ， 通 过 这 个 属性 可 以 不 用 在 段落 前 面 输入 空格 ， 而 且 缩 进 的 宽度 也 可 以 通过 数 
字 进 行 控制 ， 非 常 方便 对 页 面 优化 使 用 。 


<@— 


2 


5.2 网 站 简介 内 容 


由 于 各 个 国家 在 阅读 顺序 上 可 能 存在 差异 ， 所 以 有 的 时 候 需 要 能 够 控制 文本 的 书写 方向 ， 
或 由 左 到 右 ， 或 由 右 到 左 等 。 本 节 将 对 direction 属性 、layout-flow 属性 和 writing-mode 属性 的 


使 用 进行 讲解。 
上 视频 教学 : 光盘 /视频 /5/52 网 站 简介 内 容 .avi @ 度 : 5 分 钟 


5.2.1 基础 知识 一 一 direction 属性 


direction 属性 用 来 设置 文本 流 的 方向 ， 所 谓 的 文本 流 就 是 文本 增加 的 方向 。 比 如 古代 时 期 
人 们 喜欢 从 右 向 左 阅读 文章 , 而 现代 的 人 则 喜欢 从 左 向 右 阅 读 , 这 个 属性 就 类 似 于 这 样 的 形式 ， 
将 文字 从 左 向 右 排序 ， 或 者 从 右 向 左 排序 。 
该 属性 有 3 个 参数 ， 它 们 的 作用 分 别 是 如 下 所 示 。 
@ ltr: 文本 流 从 左 到 右 。 
@ rtl: 文本 流 从 右 到 左 。 
@ inherit: 文本 流 的 值 不 可 继承 。 
以 上 3 个 参数 则 是 设置 文本 流 的 方向 和 该 属性 是 否 被 继承 等 功能 。 
@ ”对 于 行内 元 素 , 只 有 当 unicode-bidi 属性 设置 为 embed 或 bidi-override 时 才 会 应 用 
提示 direction 属性 。 


在 上 面 提 到 了 unicode-bidi 属性 ，direction 属性 通常 需要 和 unicode-bid 属性 一 起 使 用 才 有 
效 。unicode-bidi 属性 允许 同一 个 页 面 里 存在 从 不 同方 向 读 进 的 文本 ， 同 样 它 也 有 3 个 属性 ， 
如 下 所 示 。 

@ ”normal: 对 行内 文本 进行 重新 排序 ， 使 文本 严格 按照 从 左 到 右 的 顺序 排列 。 

@ bidi-override: 按照 direction 属性 的 值 进行 排序 。 

@ embed: 效果 同 normal。 

unicode-bidi 属性 的 主要 作用 就 是 和 direction 属性 一 起 使 用 ， 接 下 来 通过 一 段 代码 来 讲解 
如 何 使 用 direction 属性 和 unicode-bidi 属性 改变 一 段 文本 流 的 方向 ， 详 细 代 码 如 下 所 示 。 

<DIV style="unicode-bidi: bidi-override; direction:rtl">Eclipse 最 初 由 oTI 和 

IBM 两 家 公司 的 IDE 产品 开发 组 创建 。 在 目前 所 有 的 可 视 化 开发 工具 中 ，Eclipse 可 以 说 是 最 有 发 展 

前 途 的 产品 之 一 。 本 书 全 面 介绍 了 Eclipse 的 开发 调试 环境 、sWT、JFace、RCP、Eclipse 表单 、 


Web 开发 和 插件 开发 等 。 
</DIV> 


上 述 代码 中 通过 设置 unicode-bidi 属性 值 为 bidi-override 和 设置 direction 值 为 rtl 让 文本 流 
从 右 到 左 进行 排序 。 


mi >> 
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5.2.2 ”基础 知识 一 一 layout-flow 属性 


layout-flow 属性 用 来 设置 或 检索 对 象 内 文本 的 流动 和 方向 ， 同 样 它 也 是 从 右 向 左 流动 的 。 
唯一 和 上 面 讲解 到 的 direction 属性 不 同 的 是 ， 它 以 上 下 排列 字体 形式 呈现 。 一 般 文 本 内 容 不 是 
从 左 向 右 就 是 从 右 向 左 , 而 layout-flow 属性 则 是 按照 从 上 向 下 的 排列 方式 将 文本 呈现 出 来 。 同 
样 该 属性 也 可 以 做 到 自 左边 流入 , 该 属性 有 horizontal 和 vertical-ideographic 两 个 值 ， 它 们 的 作 
用 简介 如 下 。 

@ 。 horizontal: 对 象 中 的 内 容 自 左 边 流入 。 下 一 行 在 前 一 行 下 面 。 这 个 值 适 于 拉丁 语系 。 

@ vertical-ideographic: 对 象 中 的 内 容 自 上 而 下 流入 ， 下 一 行 在 前 一 行 左面 。 这 个 值 适 于 

亚洲 语系 。 


 ” 当 layout-flow 属性 值 发 生变 化 时 ，textralign 属性 与 vertical-align 属性 的 作用 也 将 
| 。 发 生变 化 。 
上 面 讲述 的 是 textralign 属性 的 设置 方法 ， 以 及 检索 对 象 中 文本 的 对 齐 方式 。 下 面 通过 一 
段 代 码 来 讲解 如 何 使 用 text-align 属性 ， 详 细 代码 如 下 所 示 。 
<DIV style="layout-flow:vertical-ideographic; height:100px">Eclipse 最 初 由 
oTI 和 IBM 两 家 公司 的 IDE 产品 开发 组 创建 。 在 目前 所 有 的 可 视 化 开发 工具 中 ，Eclipse 可 以 说 是 最 
有 发 展 前 途 的 产品 之 一 。 本 书 全 面 介绍 了 Eclipse 的 开发 调试 环境 、sWT、JFace、RCP、 Eclipse 
表单 、Web 开发 和 插件 开发 等 。 
</DIV> 
通过 上 述 代码 可 以 发 现 ， 在 style 属性 中 指定 了 layout-flow 属性 值 为 vertical-ideographic， 
也 就 是 将 对 象 中 的 内 容 设 置 为 自 上 而 下 流入 。 


5.2.3 ”基础 知识 一 一 writing-mode 属性 


writing-mode 属性 用 来 设置 或 检索 对 象 的 内 容 块 固有 的 书写 方向 。 例 如 ， 西 方 语言 默认 采 
用 的 是 从 左 向 右 、 从 上 向 下 的 书写 方式 。 但 是 亚洲 语言 通常 采用 从 上 向 下 、 从 右 向 左 的 书写 方 
式 。 因 此 为 了 方便 不 同 阅 读 习惯 的 人 查看 文本 ， 可 以 使 用 该 属性 限制 文本 显示 。 该 属性 有 两 个 
参数 值 如 下 所 示 。 

@ -tb: 从 左 向 右 ， 从 上 到 下 的 横向 排列 。 

@ tb-l: 从 上 到 下 ， 从 右 向 左 的 纵向 排列 。 

该 属性 和 layout-flow 属性 运行 效果 相同 , 下 面 还 通过 一 段 代码 来 讲解 如 何 使 用 该 属性 完成 
文本 样式 ， 详 细 代 码 如 下 所 示 。 

<DIV style="writing-mode:tb-rl ; height:100px;text-align:left"> 

Eclipse 最 初 由 oTI 和 IBM 两 家 公司 的 IDE 产品 开发 组 创建 。 在 目前 所 有 的 可 视 化 开发 工具 中 ， 

Eclipse 可 以 说 是 最 有 发 展 前 途 的 产品 之 一 。 本 书 全 面 介绍 了 Eclipse 的 开发 调试 环境 、 SWT、JFace、 


RCP、Eclipse 表单 、Web 开发 和 插件 开发 等 。 
</DIV> 


< 
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在 上 述 代码 中 ， 首 先 设 置 了 writing-mode 属性 值 为 也 -fl， 使 内 容 从 上 向 下 流动 ， 字 体 从 右 


向 左 排序 。 接 下 来 设置 text-align 的 值 为 left， 使 内 容 左 对 齐 。 


5.2.4 ”实例 描述 


在 讲 了 这 么 多 关于 文本 内 容 流 的 方向 属性 后 ， 下 面 进入 开发 模式 。 通 过 一 个 实例 的 制作 ， 


让 大 家 更 好 地 了 解 和 应 用 这 些 属性 ， 从 而 做 到 恰到好处 。 本 节 仍 然 通 过 窗 内 网 网 站 介绍 进行 讲 
解 ， 通 过 设置 网 站 介绍 的 内 容 样式 让 内 容 文 本 以 从 上 到 下 的 方式 显示 。 


5.2.5 ”实例 应 用 


【 例 5-2】 网 站 简介 内 容 
首先 在 页 面 内 定义 一 个 p 元 素 ， 并 将 该 元 素 中 的 text-align 属性 设置 为 left， 同 时 设置 


writing-mode 为 tb-rl。 


<DT> 网 站 介绍 </DT> 

<DD class=about> 

<Pp style="text-align:left;writing-mode:tb-rl ; height:300px"> 
nbsp; &nbsp; &gnbsp; &nbsp; 郑州 汇 智 计 算 机 技术 服务 有 限 公 司 成 立 于 2002 年 。 致 力 于 把 基于 先进 
信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 ， 全 面 提供 企业 管理 ERP 软件 、 服 
务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关 系 管理 软件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 
提供 商 snbspy gnbsp; snbsp; gnbsp; 汇 智 科技 公司 是 北京 新 网 郑州 地 区 核心 代理 服务 商 , 提供 域名 注 
册 、 服 务 器 托管 和 虚拟 主机 服务 。 公 司 关注 IT 教育 培训 市 场 的 发 展 和 变化 ， 致 力 于 网 络 在 线 教育 ， 推 
进 无 纸 化 教学 进程 :nbsp; snbsp; sgnbsp; gnbsp; 窗 内 网 (www .itzcn.com) 结合 软件 开发 和 网 站 建 
设 的 实际 需求 ， 发 布 了 Flex、cC#、Java、ASP.NET、ASP 和 JSP 等 系列 视频 教程 。 我 们 投入 大 量 资 
源 ， 录 制 了 更 多 IT 教学 视频 产品 ， 包 括 SQL Server、 VB.NET、PHP、AJAX、 Eclipse、 Struts、 
Netbeans、JSF、Hibernate 等 开发 技术 ， 以 及 3ds max、Maya 等 三 维 动画 与 视频 处 理 教学 视频 产 
品 &nbsp; gnbsp; &nbsp; &nbsp; 早 前 ， 公 司 与 电子 工业 出 版 社 合作 编写 了 从 入 门 到 精通 ， 巧 学 巧 用 ， 
锦绣 映像 等 系列 图 书 ， 得 到 了 读者 的 一 致 好 评 和 认可 。 
</P> 

</DD> 


通过 上 面 的 实例 可 以 知道 ， 使 用 text-align 属性 可 以 设置 文本 内 容 排列 的 方向 ， 即 向 左 排 


列 还 是 向 右 排列 。 设 置 writing-mode 则 是 让 网 站 介绍 的 内 容 采 用 从 上 向 下 的 流动 方式 。 


5.2.6 ”运行 结果 


si >> 


保存 页 面 ， 运 行 aboutus.html， 页 面 运行 结果 如 图 5-2 所 示 。 
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图 5-2 网 站 简介 


5.2.7 ”实例 分 析 


& 源码 解析 : 


该 实例 中 ， 使 用 writing-mode 属性 设置 文本 内 容 块 固有 的 书写 方向 。 在 这 里 设置 该 属性 值 
为 tb-rl， 表 示 使 内 容 以 从 上 向 下 流 的 形式 显示 。 同 时 该 属性 和 text-align 属性 一 起 使 用 ， 从 而 
完成 文本 内 容 的 排列 方式 。 这 样 就 很 简单 地 完成 了 网 站 介绍 模块 的 显示 了 。 


5.3 ”详细 新 闻 信息 内 容 


本 节 主 要 讲解 文本 的 排列 方式 。 所 谓 的 排列 方式 就 是 所 需要 显示 的 文本 内 容 以 一 种 显示 方 
式 排列 在 页 面 内 。 比 如 文本 的 换行 方式 ， 可 以 通过 设置 属性 使 文本 的 换行 方式 以 日 文 文本 的 换 
行规 则 来 显示 。 下 面 则 对 text-autospace 属性 、text-kashida-space 属性 、word-break 属性 line-break 
属性 和 word-wrap 属性 进行 讲解 。 


只 视频 教学 : 光盘 /视频 /5/5.3 详细 新 闻 信息 内 容 .avi @@ 长 度 : 6 分 钟 


5.3.1 基础 知识 一 一 text-autospace 属性 


text-autospace 属性 用 来 设置 或 检索 对 象 文本 的 自动 空格 和 紧缩 空格 宽度 调整 的 方式 。 比 如 
设置 当空 格 表意 字符 时 ,扩展 空格 的 宽度 或 者 在 表意 字 和 数字 字符 之 间 创 建 额外 空格 等 。 该 属 
性 有 5 个 参数 ， 它 们 的 功能 简介 如 下 。 

@ ”none: 无 调整 发 生 。 


<@— 


ideograph-alpha: 在 表意 字 和 非 表 意 字 之 间 创 建 额外 空格 。 

ideograph-numeric: 在 表意 字 和 数字 字符 之 间 创 建 额外 空格 。 

ideograph-parenthesis: 在 常规 ( 非 宽度 ) 插 入 语 和 表意 字 之 间 创 建 额外 空格 。 

@ ideograph-space: 当空 格 相 邻 表意 字符 时 ， 扩 展 空格 的 宽度 。 

text-autospace 属性 默认 情况 下 值 为 none， 即 无 调整 状态 , 没有 任何 变化 。 下 面 通过 一 段 代 


码 介 绍 如 何 使 用 text-autospace 属性 设置 文本 的 自动 空格 和 紧缩 空格 宽度 的 调整 ， 详 细 代 码 如 
下 所 示 。 


<P style="text-autospace: ideograph-space"> 郑 州 汇 智 计算 机 技术 服务 有 限 公司 成 立 于 
2002 年 。 致力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 , 全 面 
提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关系 管理 软件 、 小 型 企业 
管理 软件 以 及 网 站 建设 服务 提供 商 snbsp; snbsp; sgnbsp; snbsp; 汇 智 科 技 公 司 是 北京 新 网 郑州 地 区 
核心 代理 服务 商 ， 提 供 域 名 注册 、 服 务 器 托管 和 虚拟 主机 服务 。</P> 


上 述 代 码 中 ， 设 置 text-autospace 属性 值 为 ideograph-space 时 用 来 设置 空格 相 邻 表意 字符 


时 扩展 空格 的 宽度 。 


5.3.2 ”基础 知识 一 一 text-kashida-space 属性 


text-kashida-space 属性 用 来 设置 或 检索 如 何 拉 伸 字 符 来 调节 文本 行 排列 。 该 属性 只 有 一 个 


参数 值 为 length， 用 来 标识 kashida 膨胀 与 空格 膨胀 的 比例 。 当 该 数值 为 100% 时 仅 有 kashida 
膨胀 。 当 该 数值 为 0% 时 仅 有 空格 膨胀 。 默 认 值 为 0%。 


该 属性 使 用 语法 如 下 所 示 。 

<P style="text-justify:distribute;text-kashida-space:50%; "> 郑州 汇 智 计算 机 技术 
服务 有 限 公司 成 立 于 2002 年 。 致 力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 
业务 创新 活动 中 ， 全 面 提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关 
系 管理 软件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 提供 商 enbsp; gnbsp; gnbsp; gnbsp; 汇 智 科技 公司 
是 北京 新 网 郑州 地 区 核心 代理 服务 商 ， 提 供 域名 注册 、 服 务 器 托管 和 虚拟 主机 服务 。</P> 


text-kashida-space 属性 和 text-justify 属性 一 起 使 用 , text-justify 属性 用 来 设置 或 检索 对 象 内 


文本 的 对 齐 方式 ， 它 有 6 个 参数 。 


@ auto: 允许 浏览 器 用 户 确定 使 用 的 两 端 对 齐 法 则 。 

@ inter-word: 通过 增加 字 之 间 的 空格 对 齐 文本 。 该 行为 是 对 齐 所 有 文本 行 最 快 的 方法 。 
它 的 两 端 对 齐 行为 对 段落 的 最 后 一 行 无 效 。 

@ ”newspaper: 通过 增加 或 减少 字 或 字母 之 间 的 空格 对 齐 文本 。 适 用 于 拉丁 文字 母 表 两 
端 对 齐 的 最 精确 格式 。 

@ distribute: 处 理 空格 很 像 newspaper， 适 用 于 东亚 文档 。 

@ distribute-all-lines: 两 端 对 齐 行 的 方式 与 distribute 相同 ， 也 同样 不 包含 两 段 对 齐 段 落 
的 最 后 一 行 。 适 用 于 表意 字 文 档 。 

@ interideograph: 为 表意 字 文 本 提供 两 端 对 齐 。 它 增加 或 减少 表意 字 和 词 间 的 空格 。 


第 5 章 文本 属性 汪 


5.3.3 ”基础 知识 一 一 word-break 属性 


word-break 属性 用 于 设置 或 检索 对 象 内 文本 的 字 内 换行 。 尤 其 在 出 现 多 种 语言 时 。 通 过 设 
置 该 属性 来 修改 文本 显示 规则 ， 该 属性 有 3 个 参数 。 

@ normal: 默认 值 。 允 许 在 非 亚洲 语言 中 的 单词 之 间 换 行 ， 并 允许 在 亚洲 语言 的 任意 两 

个 字 之 间 换 行 。 

@ “break-all: 允许 在 非 亚洲 语言 中 的 单词 内 的 任意 两 个 字母 中 间 换 行 。 

@ ”keep-all: 不 允许 在 亚洲 语言 的 一 个 单词 内 的 几 个 字 之 间 换 行 。 

在 下 面 代 码 中 ， 通 过 设置 不 同 的 word-break 属性 值 ， 显 示 文 本 内 容 不 同 的 行为 ， 详 细 代码 
如 下 所 示 : 

<P style="word-break:keep-all"> 郑 州 汇 智 计 算 机 技术 服务 有 限 公司 成 立 于 2002 年 。 致 力 于 

把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 ， 全 面 提供 企业 管理 

ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关 系 管理 软件 、 小 型 企业 管理 软件 以 及 

网 站 建设 服务 提供 商 enbsp; sgnbsp; snbsp; gnbsp; 汇 智 科 技 公 司 是 北京 新 网 郑州 地 区 核心 代理 服务 

商 ， 提 供 域名 注册 、 服 务 器 托管 和 虚拟 主机 服务 。 </P> 

<hr/> 

<P style="word-break:break-all"> 公 司 关注 IT 教育 培训 市 场 的 发 展 和 变化 ， 致 力 于 网 络 在 线 

教育 , 推进 无 纸 化 教学 进程 :nbsp; snbsp; snbsp; gnbsp; 窗 内 网 (www.itzcn.com) 结合 软件 开发 和 

网 站 建设 的 实际 需求 ， 发 布 了 Flex、C#、Java、ASP .NET、ASP 和 JSP 等 系列 视频 教程 。 我 们 投入 

大 量 资源 , 录制 了 更 多 IT 教学 视频 产品 , 包括 SQL Server、VB.NET、 PHP、AJAX、Eclipse、 Struts、 

Netbeans、JSF、Hibernate 等 开发 技术 ， 以 及 3ds max、Maya 等 三 维 动 画 与 视频 处 理 教学 视频 产 

品 &nbsp; gnbsp; &nbsp; gnbsp; 早 前 ， 公 司 与 电子 工业 出 版 社 合作 编写 了 从 入 门 到 精通 ， 巧 学 巧 用 ， 

锦绣 映像 等 系列 图 书 ， 得 到 了 读者 的 一 致 好 评 和 认可 。 

</P> 

上 述 代码 中 ， 使 用 hr 元 素 显 示 一 条 线段 ， 将 内 容 分 为 上 下 两 部 分 。 其 中 ， 上 部 分 将 
word-break 属性 值 设置 为 keep-all 使 文本 依照 亚洲 语言 的 normal 方式 显示 ， 下 面部 分 将 
word-break 属性 值 设置 为 break-all， 则 是 所 有 的 内 容 与 所 有 非 亚 洲 语言 的 normal 方式 显示 。 


5.3.4 ”基础 知识 一 一 line-break 属性 


line-break 属性 用 来 设置 或 检索 日 文 文本 的 换行 规则 。 其 作用 是 以 日 文 文本 的 换行 规则 将 
文本 内 容 呈 现在 页 面 上 ， 该 属性 有 两 个 参数 分 别 如 下 所 示 。 

@ normal: 应 用 日 文 文本 的 默认 换行 规则 。 

@ strict: 强制 日 文 文本 换行 规则 的 严谨 性 。 

下 面 代码 中 演示 如 何 使 用 该 属性 对 日 文 文本 进行 格式 化 ， 详 细 代 码 如 下 所 示 : 


<P style="line-break:strict"> </P> 


5.3.5 ”基础 知识 一 一 word-wrap 属性 
word-wrap 属性 用 于 设置 或 检索 当前 行 超过 指定 容器 边界 时 是 否 自动 换行 。 也 就 是 说 如 果 


< 


定义 的 文本 在 指定 的 容器 内 显示 时 ， 如 果 文 本 宽度 大 于 容器 的 宽度 时 是 否 进行 换行 显示 。 该 属 
性 同样 有 两 个 值 ， 详 细 如 下 所 示 。 

@ normal: 人 允许 内 容 超 出 指定 的 容器 边界 。 

@ break-word: 内 容 将 在 边界 内 换行 。 

该 属性 的 两 个 参数 是 用 来 控制 容器 内 部 内 容 的 显示 方式 、 是 否 换行 等 功能 。 下 面 通 过 一 个 
简单 的 实例 ， 比 较 两 个 参数 的 区 别 ， 详 细 代码 如 下 所 示 : 

<div style=" width:200px;word-wrap:break-word"> 郑 州 汇 智 计算 机 技术 服务 有 限 公 司 成 立 

于 2002 年 。 致 力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 ， 

全 面 提供 全 面 提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 的 管理 软件 、 客 户 关系 管理 软 

件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 提供 商 snbsp; snbsp; snbsp; gnbsp; 汇 智 科 技 公 司 是 北京 新 

网 郑州 地 区 核心 代理 服务 商 ， 提 供 域名 注册 、 服 务 器 托管 和 虚拟 主机 服务 。 

</div> 

上 述 代 码 中 ， 当 内 容 的 宽度 大 于 定义 div 元 素 的 宽度 时 ， 将 会 根据 word-wrap 属性 指定 的 
值 进行 显示 。 如 果 该 参数 取 值 为 normal， 那 么 容器 内 的 内 容 将 不 会 换行 而 是 将 容器 撑 开 显示 。 
如 果 取 值 为 break-word， 那 么 内 容 则 会 进行 换行 显示 。 


5.3.6 ”实例 描述 


本 实例 通过 新 闻 详细 信息 页 面 的 文本 显示 样式 , 深入 讲解 学 习 到 的 一 些 文本 排列 方式 的 样 
式 应 用 。 通 过 设置 新 闻 的 详细 内 容 ， 讲 解 自动 换行 、 换 行 是 否 截取 、 如 何 拉 伸 字符 来 调节 文本 
行 排列 等 功能 的 实现 ， 详 细 步 骤 如 下 所 示 。 


5.3.7 ”实例 应 用 


【 例 5-3】 新 闻 详 细 内 容 
首先 需要 布局 页 面 新 闻 显示 内 容 ， 将 需要 显示 的 新 闻 内 容 写 入 div 元 素 中 ， 通 过 设置 div 
元 素 样式 来 完成 整个 新 闻 详 细 内 容 的 样式 排序 ， 详 细 代 码 如 下 所 示 : 


<TBODY> 
<TR> 
<TD style="LINE-HEIGHT: 140%; FONT-SIZE: 9pt" 

id=dede content width=659> 

<div class="mscss"” style=""> 中 新 网 8 月 6 日 电 
受 近 日 大 盘 震 荡 整 理 走势 影响 ， 沪 深 两 市 双双 于 10 日 均线 下 方 微 幅 低 开 。 开 盘 后 指数 掉头 向 上 再 试 10 
日 均线 ， 但 在 短期 走 弱 的 预期 之 下 ， 大 盘 上 冲 乏 力 ， 目 前 沪指 下 跌 0 .34%。 板 块 方面 ， 创 业 板 大 涨 ， 领 
涨 大 盘 。 盘 面 上 看 ， 农 牧 饲 渔 板块 再 度 大 涨 2.97%， 暂 时 领 涨 两 市 ， 木 业 家 具 、 食 品 、 物 流 、 券 商 信托 
等 板块 涨 势 居 前 。 目 前 民航 机 场 、 家 电 、 房 地 产 、 石 油 、 汽 车 等 权重 板块 位 居 跌 幅 前 列 。 个 股 方面 ， 目 
前 两 市 逾 1400 家 个 股 下 跌 , 新 股 N 国 腾 大 涨 106. 50s, 另 两 家 新 股 N 双 林 和 N 尤 洛 卡 分 别 上 涨 81.44% 
和 59.98%。 普 利 特 、 四 川 圣 达 、 成 飞 集成 、 新 农 开 发 、 亚 盛 集团 纷纷 封 涨停 。 两 市 暂 无 跌停 个 股 ， 滨 
江 集 团 大 跌 6 .86% 居 首 ， 信 邦 制药 、 空 港股 份 、 九 龙山 、 苏 泊 尔 位 居 跌 幅 前 列 。 
截至 发 稿 ， 沪 指 报 2615 .43 点 ， 跌 5.03 点 ， 跌 幅 0.19%， 成 交 量 208 . 5 亿 元 ; 深 成 指 报 10715 .3 
点 ， 跌 52.73 点 ， 跌 幅 0.49%， 成 交 量 203 .8 亿 元 。 
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</div> 
</TD> 
</TR> 
</TBODY> 


在 上 述 代码 中 ,定义 div 元 素 显示 新 闻 详细 内 容 。 通 过 设置 div 元 素 的 class 属性 来 指定 样 
下 面 则 是 div 元 素 内 文本 样式 信息 ， 详 细 代码 如 下 : 


<STYLE type=text/css> 
.mscss{ 

text-autospace: ideograph-space; /* 设 置 或 检索 对 象 文本 的 自动 空格 和 紧缩 空格 宽度 调 
整 的 方式 。*/ 

text-justify:distribute;text-kashida-space:50%;/* 设 置 或 检索 如 何 拉 伸 字符 来 调 
节 文 本 行 排列 */ 

word-break:normal; /* 设 置 或 检索 如 何 拉 伸 字符 来 调节 文本 行 排列 */ 


式 


width:640px; /* 设 置 div 的 宽度 */ 
word-wrap:break-word; ”/* 换 行 是 否 断 开 */ 
text-indent: 6mm; /* 自 动 缩 进 */ 
} 

</STYLE> 


上 述 代 码 则 是 设置 div 元 素 的 样式 代码 , 通过 设置 text-autospace 属性 使 文本 自动 调整 空格 
和 紧缩 空格 的 宽度 。 同 时 还 设置 了 text-kashida-space 属性 ， 使 文本 拉 伸 字符 调整 文本 行 排列 等 
功能 属性 。 


5.3.8 运行 结果 


保存 修改 后 的 页 面 ， 在 浏览 器 中 运行 NewMessage.htm 页 面 。 显 示 如 图 5-3 所 示 的 效果 。 
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5-3 ”新 闻 详 细 信息 页 面 


< 人 @——— 


人 wx 


5.3.9 实例 分 析 


6& 源码 解析 : 


在 本 实例 中 ， 修 改 text-indent 属性 使 段落 缩 进 6mm。 修 改 word-wrap 属性 为 break-word， 
使 文本 内 容 大 于 容器 的 边界 时 自动 换行 ; 修改 text-autospace 属性 设置 紧缩 空格 的 宽度 ; 将 
word-break 属性 设置 为 normal， 控 制 文本 中 单词 之 间 的 换行 。 


5.4 ”新 闻 信息 列表 设置 


本 节 将 对 如 何 设置 对 象 中 的 文本 的 字体 大 小 写 、 文 本 修饰 属性 以 及 对 多 余 字 符 的 截取 等 
功能 进行 讲解 ， 它 们 分 别 对 应 的 则 是 text-transform 属性 、text-decoration 属性 和 text-overflow 
属性 。 


各 视频 教学 : 光盘 /视频 /5/5.4 新 闻 信息 列表 设置 avi 人 @@ 长 度 : 5 分 名 


5.4.1 基础 知识 一 一 text-transform 属性 


text-transform 属性 用 于 检索 或 设置 对 象 中 的 文本 的 大 小 写 , 并 将 文本 的 内 容 由 小 写 转换 为 
大 写 或 者 由 大 写 转换 为 小 写 。 该 属性 有 4 个 值 ， 它 们 的 作用 就 是 用 来 控制 定义 显示 内 容 的 显示 
格式 ， 下 面 则 是 该 属性 值 的 功能 。 
@ none: 无 转换 发 生 。 
@ capitalize: 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 。 
@ uppercase: 转换 成 大 写 。 
@ ”lowercase: 转换 成 小 写 。 
通过 下 面 一 段 代 码 将 页 面 上 显示 的 内 容 进 行 大 小 写 转换 。 通 过 设置 text-transform 属性 配置 
它 的 值 就 可 以 完成 ， 该 属性 的 默认 值 为 none， 没 有 任何 转换 效果 ， 详 细 代码 如 下 所 示 : 
<div style="text-transform:capitalize"> 
hello world 
</div> 
<div style="text-transform:uppercase"> 
hello world 
</div> 
<div style="text-transform:lowercase"> 
HELLO WORLD 
</div> 
在 上 述 代码 中 定义 了 3 个 div 元 素 , 在 每 个 div 中 都 有 英语 字母 , 第 一 个 div 中 写 着 “hello 
world”， 第 二 个 div 和 第 一 个 div 相同 ， 唯 一 不 同 的 就 是 第 一 个 div 的 text-transform 属性 值 为 
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capitalize， 从 而 将 单词 的 首 字 母 大 写 。 第 二 个 div 的 text-transform 属性 则 是 将 所 有 小 写字 母 全 

部 转换 为 大 写字 母 。 第 三 个 div 定义 的 text-transform 属性 则 是 将 所 有 大 写字 母 转换 为 小 写 ， 因 

此 当 运 行 页 面 时 呈现 在 页 面 上 的 则 是 第 一 个 div 为 “Hello World”， 第 二 个 div 显示 的 内 容 为 
“HELLO WORLD”， 第 三 个 div 呈现 在 页 面 上 则 是 “hello world”。 


5.4.2 ”基础 知识 一 一 text-decoration 属性 


text-decoration 属性 是 文本 修饰 属性 ， 该 属性 可 以 为 页 面 提供 多 种 文本 修饰 效果 ， 比 如 下 
划 线 、 删 除 线 和 闪烁 等 。 该 属性 值 有 5 个 参数 ， 它 们 的 作用 分 别 如 下 所 示 。 
none: 无 装饰 。 
blink: 闪烁 。 
underline: 下 划 线 。 
line-through: 贯穿 线 。 
@ overline: 上 划 线 。 
text-decoration 属性 的 默认 值 非常 特殊 ， 在 不 同 的 对 象 下 默认 是 不 同 的 。 没 有 文本 的 对 象 ， 
此 属性 不 会 起 作用 。 
<div> 
<p id="pl"style="text-decoration:underline"> 郑 州 汇 智 计算 机 技术 服务 有 限 公司 成 
立 于 2002 年 。</p> 
<p id="p2"style="text-decoration:overline"> 致 力 于 把 基于 先进 信息 技术 的 最 佳 管 理 
与 业务 实践 普及 到 客户 的 管理 与 业务 创新 活动 中 ， 全 面 提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 
原 地 区 较 早 的 管理 软件 、 客 户 关系 管理 软件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 提供 商 </p> 
<p p="3" style="text-decoration:line-through"> 汇 智 科技 公司 是 北京 新 网 郑州 地 区 
核心 代理 服务 商 ， 提 供 域 名 注册 、 服 务 器 托管 和 虚拟 主机 服务 。</p> 
<p id="p4" style="text-decoration:blink"> 窗 内 网 </p> 
</div> 
在 上 述 代码 中 ,通过 设置 p 元 素 的 text-decoration 属性 修饰 不 同 的 文本 内 容 ， 其 中 pl 元 素 
内 显示 着 下 划 线 内 容 ，p2 元 素 内 显示 着 上 划 线 内 容 ，p3 则 显示 删除 线 也 就 是 贯穿 线 内 容 ，p4 
则 是 显示 闪烁 内 容 。 


6@ ， 只 有 Firefox、Mozilla 和 Netscape 浏览 器 支持 blink 闪烁 效果 , 而 IE 和 其 他 浏览 器 
如 示 | (如 Opera) 都 不 支持 该 效果 。 


5.4.3 ”基础 知识 一 一 textroverflow 属性 


text-overflow 属性 是 一 个 比较 特殊 的 样式 ， 我 们 可 以 用 它 代替 通常 所 用 的 标题 截取 函数 ， 
而 且 这 样 做 对 搜索 引擎 更 加 友好 。 例如 : 标题 文件 有 50 个 汉字 ， 而 我 们 的 列表 可 能 只 有 300px 
的 宽度 。 如 果 用 标题 截取 函数 , 则 标题 不 是 完整 的 , 如 果 我 们 用 CSS 样式 text-overflow:ellipsis， 
输出 的 标题 是 完整 的 ， 只 是 受 容器 大 小 的 局 限 不 显示 出 来 罢了 。 

text-overflow 属性 用 来 设置 或 检索 是 否 使 用 一 个 省 略 标记 标示 对 象 内 文本 的 溢出 ， 下 面 是 
text-overflow 属性 值 简介 。 


<@——— 
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@ clip: 不 显示 省 略 标记 ， 而 是 简单 地 裁 切 。 

@ ellipsis: 当 对 象 内 文本 溢出 时 显示 省 略 标记 。 

text-overflow 属性 仅 是 注解 ， 用 来 确定 当 文本 溢出 时 是 否 显示 省 略 标记 。 要 想 实现 溢出 时 
产生 省 略 号 的 效果 ， 还 必须 强制 文本 在 一 行内 显示 (white-space:nowrap) 及 溢出 内 容 为 隐藏 
(overflow:hidden)。 下 面 通过 一 个 简单 的 实例 来 实现 如 何 让 div 溢出 内 容 显示 省 略 号 效果 ， 详 细 
代码 如 下 所 示 : 

<div style="width:300px; line-height:25px; text-overflow:ellipsis; 

white-space:nowrap; overflow:hidden; "> 任何 使 用 窗 内 (http://www.itzcn.com) 的 用 户 

均 应 仔细 阅读 本 声明 ， 用 户 可 选择 不 使 用 窗 内 网 ， 用 户 使 用 窗 内 的 行为 将 被 视 为 对 本 声明 全 部 内 容 的 认 

可 ! </div> 

</div> 

在 上 述 代码 中 ， 首 先 设置 div 元 素 的 宽度 ， 当 内 容 超过 定义 div 元 素 设置 的 宽度 时 ，div 元 
素 后 面 显 示 内 容 以 省 略 号 代替 ; text-overflow 属性 设置 为 ellipsis 则 应 当 显 示 省 略 号 功能 ， 如 果 
设置 为 clip 则 直接 截断 不 显示 省 略 号 。 


5.4.4 ”实例 描述 


讲 到 这 里 大 家 一 定 对 上 面 介绍 的 这 些 属性 非常 熟悉 了 , 下面 通 过 一 个 实例 让 大 家 深入 地 了 
解 和 更 加 熟练 地 使 用 这 些 属性 。 这 个 实例 是 通过 一 个 简单 的 新 闻 列 表 进 行 讲解 ， 实 例 要 求 新 闻 
列表 标题 字体 加 粗 ， 而 且 使 用 下 划 线 样式 ， 而 标题 下 面 的 简介 则 需要 缩 进 ， 当 新 闻 简介 内 容 大 
于 定义 存放 文本 的 容器 时 ， 就 会 将 简介 内 容 后 面部 分 用 省 略 号 代替 。 


5.4.5 ”实例 应 用 


【 例 5-4】 新 闻 列表 页 面 
首先 在 页 面 上 定义 div 元 素 ， 在 每 个 div 元 素 中 写 入 要 显示 的 新 闻 列 表 的 标题 和 新 闻 简 介 
舍 息 ， 详 细 代码 如 下 所 示 : 


<TABLE border=0 width="100%"> 
<TBODY> 
<TR> 
<TD style="FONT-SIZE: 14px" 
width="100%">&gnbsp; &nbsp; tnbsp; gnbsp; <A 
title="" 


href="http://localhost:8080/News/userinfo.do?o=newsmsbyid&amp;id=119">< 
SsTRONG> 冒 名 项 蔡 事 件 引 发 高 校 清查 
1 所 学 院 清 退 300 多 人 </sTRONG></A></TD></TR> 
<TR> 
<TD>&gnbsp; gnbsp; 日 期 2010-08-06 16:35:49 单 击 : <FONT 
color=#ff0000>2 </FONT>&nbsp; </TD></TR> 
<TR> 
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<TD><div> 
6 月初 的 一 天 ， 大 三 学 生 “ 张 阳 " 被 辅导 员 叫 到 办 公 室 ， 辅 导 员 直 截 了 当地 告诉 他 : “上 面 查 
出 你 是 假 学 生 ， 你 得 退学 。" 
“ 张 阳 "似乎 有 所 准备 ， 他 站 着 ， 低 头 沉默 了 一 会 儿 ， 问 “还 有 没有 余地 "? 辅导 员 无 奈 地 扬 
头 : “如 果 你 还 想 听 课 ， 可 以 办 一 个 旁听 手续 。" 
</div></TD></TR></TBODY></TABLE> 
上 述 代 码 则 是 定义 了 新 闻 的 标题 和 新 闻 内 容 的 简介 信息 ， 同 时 设置 了 div 容器 。 下 面 则 是 
设置 新 闻 简介 内 容 样式 (div 元 素 )， 当 内 容 大 于 容器 的 宽度 时 , 将 切断 后 面 的 内 容 信息 而 以 省 略 
号 代替 ， 同 时 设置 文本 内 容 自动 缩 进 样式 ， 详 细 代码 如 下 所 示 : 
Qivi 
width:650px; 
line-height:25px; 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 


代码 中 ， 使 用 width 属性 设置 div 容器 的 大 小 ， 当 内 容 大 于 容器 的 大 小 时 ， 则 设置 
text-overflow 属性 值 为 ellipsis 来 截取 文本 。 接 下 来 则 是 设置 标题 的 下 划 线 样式 ， 详 细 代码 如 
下 所 示 : 


STRONG{ 
text-decoration:underline 


} 


通过 设置 text-decoration 属性 值 为 underline， 就 可 以 实现 为 标题 内 容 添加 下 划 线 样式 ， 同 
样 也 可 以 设置 为 上 划 线 或 者 删除 线 (贯穿 线 )。 


5.4.6 ”运行 结果 


在 浏览 器 中 运行 项 目 中 的 newlist.html 页 面 ， 运 行 结果 如 图 5-4 所 示 。 
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5-4 新闻 列 表 页 面 
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有 开发 学 习 实录 .和 


5.4.7 ”实例 分 析 


ee 


在 上 面 的 实例 中 ， 通 过 设置 CSS 样式 让 新 闻 列 表 内 容 显示 得 更 加 美观 。 首 先 使 用 
text-decoration 属性 来 定义 标题 显示 下 划 线 样式 , 然后 通过 设置 text-overflow 属性 截取 容器 内 过 
多 的 文本 信息 并 用 省 略 号 代替 。 同 时 设置 文本 自动 缩 进 功能 。 


5.5 ”常见 问题 解答 


5.5.1 CSS 闪烁 效果 问题 


[大 一 。 使 用 CSS 实现 闪烁 效果 失败 ， 没 有 显示 出 预期 的 结果 ? 
[图 ”网 络 课堂 : http://bbs.itzcn.com/thread-11370-1-1.html 
学 到 这 里 大 家 应 该 对 text-decoration 属性 已 经 非常 了 解 了 ， 也 能 够 使 用 该 属性 实现 效果 。 
可 是 今天 遇 到 了 一 个 很 头痛 的 问题 ， 我 使 用 text-decoration 属性 并 指定 它 的 值 为 blink， 实 现 一 


个 闪烁 效果 。 当 我 运行 该 页 面 时 出 现 一 个 很 严重 的 问题 ， 没 有 闪烁 的 效果 ， 很 不 理解 ， 代 码 如 
下 所 示 : 


<div id="p4" style="text-decoration:blink"> 

<a href="http://www.itzcn.com/msg"> (您 有 新 消息 ) </a> 

</div> 

上 述 代码 是 当 有 系统 信息 时 , 执行 这 段 代 码 , 使 a 元 素 超 链接 不 断 闪烁 提示 用 户 有 新 消息 。 
可 是 当 我 运行 时 却 没有 在 我 意料 之 中 闪烁 ， 请 求 帮忙 ! 

【解决 办 法 】 从 代码 上 来 看 ， 属 性 使 用 是 正确 的 ， 之 所 以 造成 不 会 出 现 闪 烁 效果 的 主要 原 
因 是 浏览 器 不 支持 ，blink 闪烁 效果 只 能 在 Firefox、Mozilla 和 Netscape 浏览 器 中 被 支持 ， 而 正 
和 其 他 浏览 器 (如 Opera) 都 不 支持 该 效果 。 


5.5.2 ruby-align 属性 无 效 


使 用 text-decoration 属性 时 运行 没有 效果 ? 
网 络 课堂 : http://bbs.itzen.com/thread-11371-1-1.html 

本 人 在 做 实例 的 时 候 使 用 ruby-align 属性 ， 如 果 ruby 文本 与 行 边缘 不 相 邻 ， 则 其 被 居中 显 
示 ; 否则 ruby 文本 行 在 基本 文本 边 的 上 方 。 可 是 我 把 内 容 放 在 页 面 上 运行 时 ， 却 没有 任何 效 
果 ， 而 且 和 普通 的 段落 没有 任何 差别 ， 代 码 如 下 所 示 : 


mt >> 


<div style="ruby-align;line-edge"> 
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<p> 


简介 : 窗 内 网 c#2008 视频 教程 系统 讲解 了 c# 基 础 知识 , 并 通过 大 量 的 案例 引导 学 生 循序 渐进 地 深入 掌 

握 c# 开 发 实际 项 目 ， 为 方便 学 生动 手 操作 ， 每 个 视频 界面 提供 案例 下 载 ， 学 生 在 观看 视频 的 同时 ， 如 果 

对 该 案例 有 兴趣 ， 可 以 下 载 到 . . . 视频 教程 。 

</p> 

</div> 

上 述 代 码 中 用 来 介绍 一 本 书 的 内 容 简 介 ， 可 是 当 显 示 在 页 面 中 时 却 不 是 想 要 的 效果 ! 

【解决 办 法 】ruby-align 属性 应 用 于 ruby 标签 中 ， 必 须 和 rt 标签 一 起 使 用 。 否 则 不 会 出 现 
想 要 的 效果 。 


5.5.3 ”显示 省 略 号 问题 


回 &4 使 用 text-overflow 属性 截取 时 内 容 显 示 省 略 号 的 问题 。 
[六 时 ”网 络 课堂 : http://bbs.itzcn.com/thread-11372-1-1.html 


今天 使 用 CSS 中 的 ext-overflow 属性 ， 实 现 当 内 容 过 多 时 溢出 容器 ， 则 截取 显示 省 略 号 。 
可 是 当 我 将 内 容 显示 到 页 面 时 ， 页 面 却 被 定义 内 容 过 多 的 容器 “ 撑 坏 ”了 ， 没 有 实现 自动 截取 
过 多 字符 串 用 省 略 号 代替 的 效果 ， 代 码 如 下 所 示 ， 大 家 帮 我 看 看 怎么 个 情况 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<tit1le>52CSS</title> 

<style type="text/css"> 

li { line-height:25px; text-overflow:ellipsis; white-space:nowrap; 
overflow:hidden;} 

</style> 

</head> 

<body> 

<ul> 

<1i><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

<li><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

<li><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

<li><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

<li><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

<1i><a href="http://ww.itzcn.com"> 窗 内 网 免费 视频 教程 </a> 

</ul> 

</body> 

</html> 


【解决 办 法 】 从 代码 上 看 ， 应 该 是 定义 的 没有 宽度 ， 也 就 是 说 当 该 属性 运行 时 找 不 到 自 
己 的 标准 , 所 以 没有 任何 效果 。 为 它 指定 一 个 标准 宽度 后 , 它 就 会 依照 这 个 宽度 进行 截取 文本 ， 
并 以 省 略 号 代替 。 
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5.6 习 题 
1. 填空 题 
(起 用 来 设置 文本 的 水 平 对 齐 方式 。 
(2) 使 用 ruby-align 属性 时 ， 需 要 和 元 素 配 合 使 用 。 
(3) layout-flow 属性 用 来 设置 或 检索 对 象 内 文本 的 流动 和 方向 ， 该 属性 有 horizontal 和 
属性 值 。 
(4) 在 CSS 样式 中 ， 属性 用 来 设置 文本 的 闪烁 功能 ,而 且 在 下 浏览 器 中 不 支持 。 
(5) 通常 使 用 text-transform 属性 , 设置 文本 大 小 写 转换 ， 当 需要 将 小 写字 母 转换 为 大 写字 
母 时 该 属性 的 值 为 

(6) word-wrap 属性 中 break-word 值 的 作用 是 
2. 选择 题 
(1) 下 面 选项 中 不 属于 direction 属性 的 值 是 

A. lt B. ntl C. inherit D. bidi 
(2) 属性 就 是 空白 属性 ， 该 属性 对 文本 的 显示 有 着 重要 的 影响 。 

A. word-wrap  B. word-break C. white-space D. line-break 


(3) text-autospace 属性 用 来 设置 或 检索 对 象 文 本 的 自动 空格 和 紧缩 空格 宽度 调整 的 方式 ， 
下 面 选 项 中 不 属于 该 属性 的 值 的 是 


A. ideograph-alpha B. ellipsis 
C. ideograph-parenthesis D. ideograph-space 
(4) 如 果 我 们 需要 在 文本 中 显示 一 条 删除 线 (贯穿 线 ), 那么 就 需要 指定 text-decoration 属性 
的 值 。 
A. blink B. underline C. line-through D. overline 
3. 上 机 练习 


上 机 练习 : 视频 信息 列表 页 面 。 

实现 窗 内 网 视频 列表 显示 模块 ， 该 模块 要 求 标题 加 粗 ， 而 且 具 有 超 链接 功能 ， 标 题 下面 简 
介 要 求 使 用 小 号 字体 ， 文 本 流动 方向 由 左 向 右 ， 当 内 容 宽 度 大 于 定义 容器 的 大 小 后 将 以 省 略 号 
代替 。 运 行 结果 如 图 5-5 所 示 。 


5-5 ”视频 列表 页 面 
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内 容 摘要 : 

在 HTML 中 ， 我 们 使 用 表格 来 创建 文本 周围 的 边框 ; 但 如 果 使 用 CSS 边框 属性 ， 我 们 就 
可 以 创建 出 效果 出 色 的 边框 ， 并 且 可 以 应 用 于 任何 元 素 。 元 素 外 边 距 内 就 是 元 素 的 边框 
(borden)。 

元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 。 每 个 边框 都 有 3 个 属性 : 宽度 、 
样式 以 及 颜色 。 本 章 我 们 就 来 详细 介绍 设置 边框 以 及 边框 尺寸 的 各 种 属性 ， 通 过 灵活 运用 这 些 
属性 来 为 页 面 元 素 设置 漂亮 的 边框 样式 。 

学 习 目 标 : 

@ 掌握 边框 样式 属性 border-style、border-width、border-color 和 border 

@ 熟 入 边框 各 个 局 部 样式 属性 

@ ”掌握 设置 边框 尺寸 属性 


6.1 设置 一 个 彩色 的 盒子 


页 面 元 素 的 边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 ， 和 表格 的 外 边线 非常 相似 。 一 
个 页 面 元 素 的 边框 可 以 从 宽度 、 样 式 和 颜色 三 方面 来 描述 ， 这 三 个 方面 决定 了 边框 所 显示 出 
来 的 外 观 。CSS 提供 了 border-style、border-width 和 border-color 三 个 属性 来 设 定 边框 的 这 三 个 


方面 。 
和 视频 教学 :光盘 /视频 /6/6.1 设置 一 个 彩色 的 金子 avi Ok 5 分 名 
6.1.1 基础 知识 一 一 border-style 属性 


border-style 属性 用 于 设置 页 面 元 素 边框 的 样式 ， 也 就 是 风格 。 样 式 是 边框 最 重要 的 一 个 方 
面 ， 因 为 样式 控制 着 边框 的 显示 ， 没 有 样式 ， 将 根本 没有 边框 。CSS 提供 了 10 种 边框 样式 ， 


如 表 6-1 所 示 。 


表 6-1 边框 样式 

样式 取 值 说 明 
none 默认 值 。 无 边框 。 不 受 任何 指定 
hidden 隐藏 边框 。IE 不 支持 该 样式 
dotted 在 Mac 平台 上 IE4+ 与 Windows 和 UNIX 平台 上 IE5.5+ 为 点 线 。 否 则 为 实 线 
dashed 在 Mac 平台 上 IE4+ 与 Windows 和 UNIX 平台 上 IE5.5+ 为 虚线 。 否 则 为 实 线 
solid 实 线 边框 
double 双 线 边框 。 两 条 单线 与 其 间隔 的 和 等 于 指定 的 border-width 值 

oove 根据 border-color 的 值 画 3D 凹 槽 线 式 边 框 
Tidge 根据 border-color 的 值 画 3D 凸 槽 线 式 边框 
inset 根据 border-color 的 值 画 3D 内 媒 效 果 的 边框 
outset 根据 border-color 的 值 画 3D 凸 起 效果 的 边框 


mB >> 


border-style 属性 的 语法 格式 : 


border-style : none | hidden | dotted | dashed | solid | double | groove | ridge 
| inset | outset 


下 面 来 设置 一 个 div 元 素 的 边框 样式 ，CSS 样式 代码 如 下 所 示 : 


div.divl { 


} 


border-style: none; // 默 认 值 ， 无 边框 


div.div2 { 


} 


border-style: hidden;  // 隐 藏 边框 
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div.div3 { 
border-style: solid; // 实 线 边框 
| 
div.div4 { 
border-style: double;  ”// 双 线 边框 
} 
div.div5 { 
border-style: groove;  // 四 模 线 式 边框 
} 
div.div6 { 
border-style: ridge; // 凸 槽 线 式 边框 
} 
div.div7 { 
border-style: inset; // 内 嵌 效 果 的 边框 
} 
div.div8 { 
border-style: outset;  // 则 起 效果 的 边框 
} 
div.div9 { 
border-style: dashed; 
} 
div.divi0 { 
border-style: dotted; 
} 


上 述 各 个 边框 样式 的 执行 效果 如 图 6-1 所 示 。 


D: \work2\CSS_6\WobRoot\indox. ktal — Windows Intornot Fzplorer 


GO Er 下 四 区 


窗 电 康 天 者 wmlCACSS_6WohRoot 从 ~ 本 ”页 而)， 安 主 5)” 工 具 中 "而" ” 


none 


hidden 


图 6-1 边框 样式 
6.1.2 ”基础 知识 一 一 border-width 属性 


border-width 属性 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边框 设置 宽度 。 它 的 可 选 


<@——— 
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值 分 别 是 medium、thin 和 thick 等 。 具 体 介绍 如 表 6-2 所 示 。 
表 6-2 border-width 属性 


>> 


属性 名 说 明 
和 | 默认 值 ， 定 义 中 等 的 边框 
thin | 定义 细 的 边框 
thick | 定义 粗 的 边框 
length | 允许 自 定义 边框 的 宽度 
width | 自 定义 宽度 
inherit 规定 应 该 从 父 元 素 继承 边框 宽度 


border-width 属性 只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 
注意 边框 宽度 实际 上 会 重 置 为 0。 也 不 允许 指定 负 长 度 值 。 另 外 所 有 浏览 器 都 支持 
border-width 属性 ， 但 任何 版 本 的 Internet Explorer( 包 括 IE8) 都 不 支持 属性 值 
“inherit” 。 
border-width 属性 的 语法 格式 : 
border-width : medium | thin | thick | length 


下 面 使 用 border-width 属性 的 常用 属性 值 来 设置 div 元 素 的 边框 宽度 , CSS 代码 如 下 所 示 : 


div.divl { 

border-style: solid; border-width: lpx; // 设 置 边框 宽度 为 1 个 像素 
} 
div.div2 { 

border-style: solid; border-width: lem; // 设 置 边框 宽度 为 lem 
} 
div.div3 { 

border-style: solid; border-width: lex; // 设 置 边 框 宽度 为 lex 
} 
div.div4 { 

border-style: solid; border-width: thin; // 设 置 细 的 边框 
} 
div.div5 { 

border-style: solid; border-width: medium; // 设 置 中 等 的 边框 


} 
div.div6 { 
border-style: solid; border-width: thick; // 设 置 粗 的 边框 


设置 div 元 素 边框 宽度 。 在 浏览 器 中 的 执行 效果 如 图 6-2 所 示 。 
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6.1.3 ”基础 知识 


图 6-2 设置 边框 宽度 


border-color 属性 


border-color 属性 用 于 设置 边框 颜色 。border-color 可 以 指定 一 个 color 参数 来 设置 边框 的 颜 


色 ， 语 法 格式 如 下 : 


border-color : color 


下 面 使 用 border-color 属性 来 设置 div 元 素 的 边框 颜色 ， 代 码 如 下 所 示 : 


.dl 
border-color: 
border-style: 


border-color: 
border-style: 


border-color: 
border-style: 


border-color: 
border-style: 


border-color: 
border-style: 
} 


设置 div 元 素 的 边框 颜色 。 在 浏 


#FFAS5OO0; 
solid; 


#33CCO0; 
solid; 


:#6600FF; 


solid; 


#FF6347; 
solid; 


:gray; 


solid; 


// 设 置 div 边框 颜色 为 橙色 


// 设 置 div 边框 颜色 为 绿色 


// 设 置 div 边框 颜色 为 蓝 色 


// 设 置 div 边框 颜色 为 番茄 红 


// 设 置 div 边框 颜色 为 灰色 


览 器 中 执行 效果 如 图 6-3 所 示 。 


[x 
己 者 -页 面目- 实生 加 工具 大" ” 
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图 6-3 设置 边框 颜色 


6.1.4 ”基础 知识 一 一 border 属性 


border 属性 是 一 个 复合 属性 ， 包 含 了 上 述 border-style、border-width 和 border-color 三 种 属 
性 ， 可 以 设置 页 面 元 素 的 样式 、 宽 度 和 颜色 。 语 法 格式 如 下 : 


border : border-width || border-style || border-color 


下 面 使 用 border 属性 来 设置 页 面 div 元 素 边框 的 样式 、 宽 度 和 颜色 。 代 码 如 下 所 示 : 
.border{ 


border:thick double red; // 设 置 div 元 素 边框 为 中 等 宽度 ， 双 线 样式 、 红 色 
} 


border 属性 设置 div 元 素 为 双 线 样式 , 中 等 红色 的 边框 。 在 浏览 器 中 执行 效果 如 图 6-4 所 示 。 


6-4 border 属性 设置 div 元 素 边框 


6.1.5 “实例 描述 


本 实例 通过 设置 页 面 div 元 素 的 边框 样式 , 最 后 生成 一 个 彩色 的 盒子 , 大 家 一 定 很 好 奇 吧 ， 
元 素 边框 怎么 会 变 成 一 个 盒子 呢 ? 那 就 带 着 好 奇 心 ， 一 起 来 动手 做 一 做 这 个 实例 吧 。 


6.1.6 ”实例 应 用 
【 例 6-1)】 设置 一 个 彩色 的 盒子 


(1) 新 建 一 个 HTML 页 面 border-example.html， 在 该 页 面 中 定义 一 个 div 元 素 。 代 码 如 下 
所 示 : 


m8 >> 
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<body> 
<div class="divl"> 
<img src="role files/happy.gif"/> 
</div> 
</body> 
(2) 新 建 一 个 CSS 文件 border-example.css， 在 该 文件 中 设置 div 元 素 的 边框 样式 ， 使 该 边 
框 显示 为 一 个 彩色 的 盒子 形状 ， 代 码 如 下 所 示 : 
-Qivli{ 
height:20px; 
width:20px; 
border-color:#FF9600 #3366ff #12ad2a #f0eb7a; 


border-style:solid; 
border-width:20px; 


6.1.7 ”运行 结果 


实例 编写 完成 之 后 , 在 浏览 器 中 运行 border_example.html 文件 , 可 以 看 到 一 个 彩色 的 盒子 ， 
执行 效果 如 图 6-5 所 示 。 


二 A ”有 四 


主页 活 申 足迹 落 记 相映 点 环 好 友 


图 6-5 彩色 的 盒子 


6.1.8 实例 分 析 


am 


本 实例 主要 就 是 设置 一 个 div 元 素 的 边框 样式 . 使 用 border-style 属性 设置 div 元 素 的 边框 
为 实 线 边 框 ，border-width 属性 设置 边框 宽度 为 20px，border-color 属性 设置 边框 四 边 的 颜色 ， 
最 后 一 个 彩色 的 盒子 就 形成 了 。 
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6.2 设置 一 个 圆 角 边框 


上 节 学 习 了 整体 设置 页 面 元 素 的 边框 样式 属性 ， 本 节 将 介绍 一 些 设置 局 部 边框 的 样式 属 
性 , 如 : border-top 属性 (设置 顶部 边框 样式 )、border-right 属性 (设置 右边 框 样式 )、border-bottom 
属性 (设置 底部 边框 样式 ) 和 border-left 属性 (设置 左边 框 样式 )。 


入 视频 教学 ， 光盘 /视频 /6/6 2 设置 一 个 回 角 边框 @k 度 :12 分 名 


6.2.1 基础 知识 一 一 border-top 属性 


border-top 属性 属于 一 个 复合 属性 ， 用 于 设置 顶部 边框 的 样式 ， 可 以 按 顺 序 设 置 
border-top-width、border-top-style 和 border-top-color 属性 。 

1. border-top-width 属性 

border-top-width 属性 用 于 设置 页 面 元 素 项 部 边框 的 宽度 , 该 属性 只 有 当 边 框 样式 不 是 none 
时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 0。 不 允许 指定 负 长 度 值 。 该 属 
性 的 可 选 值 与 border-width 属性 的 可 选 值 相 同 ， 只 不 过 border-width 属性 值 是 用 来 设置 页 面 元 
素 整 个 边框 的 宽度 ， 而 border-top-width 属性 值 用 来 设置 页 面 元 素 的 项 部 边框 宽度 。 
border-top-width 属性 的 基本 语法 格式 如 下 所 示 : 

border-top-width : medium | thin | thick | length 

下 面 看 一 个 小 实例 设置 页 面 div 元 素 的 顶部 边框 的 宽度 ， 代 码 如 下 所 示 : 


.border-top-width{ 
width:327px; 
border:solid; 
border-top-width:10px; 

} 


设置 页 面 div 元 素 顶 部 边框 宽度 。 执 行 效果 如 图 6-6 所 示 。 


border-~tpp-width 寺 数 - Windows Internet Explorer 
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图 6-6 设置 div 元 素 宽度 
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请 在 border-top-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获得 边框 之 后 ， 
注重 | 。 才能 改变 其 边框 的 宽度 。 


2. border-top-style 属性 


border-top-style 属性 用 于 设置 页 面 元 素 顶 部 边框 的 样式 .只 有 当 该 属性 值 不 是 none 时 边框 
才 可 能 出 现 。border-top-style 属性 的 可 选 值 与 border-style 属性 的 可 选 值 相同 ， 如 表 6-1 所 示 。 
border-top-style 属性 的 基本 语法 格式 如 下 所 示 : 


border-top-style : none | hidden | dotted | dashed | solid | double | groove 
| ridge | inset | outset 


下 面 使 用 border-top-style 属性 设置 页 面 div 元 素 的 顶部 边框 为 两 条 蓝 色 直线 ， 代 码 如 下 
所 示 : 


border-top-style{ 
border:blue 10px; 
border-top-style:double; 
Bh 


设置 页 面 div 元 素 上 边框 样式 。 执 行 效果 如 图 6-7 所 示 。 
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图 6-7 设置 元 素 上 边框 样式 
3. border-top-color 属性 


border-top-color 属性 用 于 设置 页 面 元 素 顶 部 边框 的 颜色 。 该 属性 只 能 定义 纯色 的 边框 颜色 ， 
而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 。border-top-color 属性 
可 以 指定 一 个 color 参数 值 ， 为 页 面 元 素 设置 上 边框 的 颜色 ， 语 法 格式 如 下 所 示 : 


border-top-color : color 


下 面 使 用 border-top-color 属性 设置 页 面 p 元 素 的 顶部 边框 颜色 ， 代 码 如 下 所 示 : 
Pi 

width:610px; 

border-style: solid; 

border-top-color: #ff0000; 


<@—— 


border-top-color 属性 设置 页 面 p 元 素 的 顶部 边框 颜色 的 执行 效果 如 图 6-8 所 示 。 
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图 6-8 设置 页 面 p 元 素 的 上 边框 颜色 
$ 一 定 要 把 border-style 属性 声明 在 border-color 属性 之 前 ， 因 为 页 面 元 素 必 须 在 改 
注意 变 其 颜色 之 前 获得 边框 。 


6.2.2 ”基础 知识 一 一 border-right 属性 


border-right 属性 用 于 设置 页 面 元 素 右 边框 的 样式 ， 可 按 顺 序 设置 border-right-width、 
border-right-style 和 border-right-color 属性 。 

1. border-right-width 属性 

border-right-width 属性 用 于 设置 页 面 元 素 右边 框 的 宽度 。 该 属性 也 是 只 有 当 边 框 样式 不 为 
none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 0。 不 允许 指定 负 长 度 值 。 

border-right-width 属性 的 可 选 值 也 和 border-width 属性 相同 。 只 不 过 border-width 属性 是 设 
置 元 素 整体 边框 的 宽度 ， 而 border-right-width 属性 只 设置 元 素 右 边框 的 宽度 。 基 本 语法 格式 如 
下 所 示 : 

border-right-width : medium | thin | thick | length 

下 面 使 用 border-right-width 属性 设置 页 面 p 元 素 的 右边 框 的 宽度 ， 代 码 如 下 所 示 : 


P 
{ 
border-style: solid; 
border-right-width: 15px 
} 


2. border-right-style 属性 


border-right-style 属性 用 于 设置 页 面 元 素 右边 框 的 样式 ， 只 有 当 该 属性 值 不 是 none 时 边框 
才能 出 现 。 该 属性 可 选 值 和 border-style 属性 相同 。 它 的 基本 语法 格式 如 下 所 示 : 


border-right-style : none | hidden | dotted | dashed | solid | double | groove 
riadgeliausetn loatset 
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使 用 border-right-style 属性 设置 页 面 div 元 素 的 右边 框 样式 ， 代 码 如 下 所 示 : 


div{ 


border-style:solid; 
border-right-style:dotted; 
1 


3. border-right-color 属性 


border-right-color 属性 用 于 设置 页 面 元 素 右 边框 的 颜色 ， 该 属性 也 是 只 能 定义 纯色 ， 而 且 
只 有 当 边 框 不 是 none 或 hidden 时 , 才能 起 作用 。 它 的 可 选 值 和 border-color 属性 相同 ， 基 本 语 
法 格式 如 下 所 示 : 


border-right-color : color 
使 用 border-right-color 属性 设置 页 面 div 元 素 的 右边 框 的 颜色 ， 代 码 如 下 所 示 : 
div{ 


border-right-style:solid; 
border-right-color:green; 


6.2.3 ”基础 知识 一 一 border-bottom 属性 


border-bottom 属性 用 于 设置 页 面 元 素 底部 边框 的 样式 。 它 是 一 个 复合 属性 ， 可 按 顺 序 设置 
border-bottom-width、border-bottom-style 和 border-bottom-color 属性 。 

1. border-bottom-width 属性 

border-bottom-width 属性 用 于 设置 页 面 元 素 的 底部 边框 的 宽度 。 如 果 边 框 样式 不 是 none， 
那么 该 属性 将 才 起 作用 , 边框 样式 为 none, 边框 的 实际 宽度 会 重 置 为 0, 不 允许 指定 负 长 度 值 。 
它 的 基本 语法 格式 如 下 所 示 : 

border-bottom-width : medium | thin | thick | length 

使 用 border-bottom-width 属性 设置 页 面 div 元 素 的 底部 边框 宽度 ， 代 码 如 下 所 示 : 

div{ 


border-style:solid; 


border-bottom-width:thick; // 定 义 粗 的 下 边框 
PE 


2. border-bottom-style 属性 


border-bottom-style 属性 可 以 设置 页 面 元 素 的 底部 边框 的 样式 ， 另 外 为 了 方便 呈现 
border-bottom-style 属性 设置 的 边框 样式 ， 必 须 设置 大 于 零 的 border-width。border-bottom-style 
属性 的 基本 语法 格式 如 下 所 示 : 


border-bottom-style : none | hidden | dotted | dashed | solid | double | groove 
ziegell dnset loutset 


<@—— 


使 用 border-bottom-style 属性 设置 页 面 div 元 素 的 底部 边框 样式 ， 代 码 如 下 所 示 : 


div{ 
border-bottom-style:solid; 
border-bottom-width:thick; 

上 


3. border-bottom-color 属性 
border-bottom-color 设置 元 素 底部 边框 的 颜色 ， 只 能 设置 纯色 ， 并 且 只 有 当 边 框 的 样式 是 
一 个 非 none 或 hidden 的 时 候 边 框 才能 出 现 。 该 属性 的 使 用 语法 如 下 所 示 : 
border-bottom-color : color 
下 面 使 用 border-bottom-color 来 设置 div 元 素 的 底部 边框 颜色 ， 代 码 如 下 所 示 : 


.color{ 
border-style:solid; 
border-bottom-color:#ff0000; 


6.2.4 ”基础 知识 一 一 border-left 属性 


border-left 属性 用 于 设置 页 面 元 素 的 左边 框 样式 。 它 是 一 个 复合 属性 ， 可 以 按 顺 序 设置 
border-left-width、border-left-style 和 border-left-color 属性 。 
1.border-left-width 属性 
border-left-width 属性 可 以 设置 页 面 元 素 的 左边 框 宽度 ， 它 的 可 选 值 和 border-width 属性 相 
同 ， 基 本 语法 格式 如 下 所 示 : 
border-left-width : medium | thin | thick | length 
下 面 使 用 border-left-width 属性 设置 左边 框 宽度 ， 代 码 如 下 所 示 : 


.border-left-width{ 
border-style:solid; 
border-left-width:thin; 

} 


2. border-left-style 属性 
border-left-style 属性 用 于 设置 页 面 元 素 的 左边 框 样式 , 它 的 可 选 值 和 border-style 属性 相同 ， 
基本 语法 格式 如 下 所 示 : 


border-left-style : none | hidden | dotted | dashed | solid | double | groove 


| ridge | inset | outset 
下 面 使 用 border-left-style 属性 设置 body 元 素 的 左边 框 样式 ， 代 码 如 下 所 示 : 
body{ 


border-left-style:dashed; 
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border-left-width:thin; 
} 


3. border-left-color 属性 

border-left-color 属性 用 于 设置 页 面 元 素 左边 框 的 颜色 ,该 属性 也 是 只 能 定义 纯色 ,而 且 只 
有 当 边 框 不 是 none 或 hidden 时 , 才能 起 作用 。 它 的 可 选 值 和 border-color 属性 相同 ， 基 本 语法 
格式 如 下 所 示 : 


border-left-color : color 


下 面 再 来 使 用 border-left-color 属性 来 设置 body 元 素 的 左边 框 颜 色 ， 代 码 如 下 所 示 : 


body{ 
border-left-style:dashed; 
border-left-width:thin; 
border-left-color:green; 


6.2.5 ”实例 描述 


通过 上 面 的 学 习 ， 相 信 大 家 对 边框 的 各 种 样式 设置 已 经 掌握 得 差不多 了 ， 那 就 来 做 一 个 实 
例 练 练 手 吧 ， 本 节 实 例 要 设置 一 个 圆 角 的 边框 ,怎么 样 ? 很 好 奇 吧 ? 这 个 实例 设置 的 边框 与 前 
面 介绍 的 边框 不 一 样 了 ， 前 面 都 是 平角 的 。 那 就 让 我 们 一 起 带 着 好 奇 心 来 做 这 个 实例 吧 。 


6.2.6 ”实例 应 用 


【 例 6-2】 设 置 一 个 圆 角 边框 
(1) 新 建 一 个 border-layout.html 文件 ， 在 该 文件 中 定义 一 些 div 元 素 ， 代 码 如 下 所 示 : 


<body> 
<div class="box"> 
<div class="top"></div> 
<div class="center"> 图 书馆 : 1 月 30 日 -小 型 网 上 书店 纪念 日 </div> 
<div class="bot"></div> 
</div> 
</body> 


(2) 在 border-layout.html 文件 所 在 目录 下 新 建 一 个 border-layout.css 文件 ， 用 来 设置 该 
HTML 页 面 元 素 样式 生成 一 个 圆 角 的 边框 ， 代 码 如 下 所 示 : 


.box{ 
width:500px; 


} 

.top{ 
border-bottom:3px solid; 
border-top-color:#cc0000; 


<@—— 
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border-bottom-color:#cc0000; 
border-left:3px dotted transparent; 


border-right:3px dotted transparent; 
} 
.centert{ 
padding:10px 20px; 
color:white; 
font-size:14px; 
background:#cc0000; 
| 
.bot{ 
border-top:3px solid; 
border-top-color:#cc0000; 
border-bottom-color:#cccccc; 
border-left:3px dotted transparent; 
border-right:3px dotted transparent; 


6.2.7 ”运行 结果 


使 用 正 浏览 器 打开 border-layout html 页 面 ， 执 行 效果 如 图 6-9 所 示 。 
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6-9 一 个 圆 角 的 边框 


6.2.8 实例 分 析 


点 源码 解析 : 


本 实例 中 生成 的 圆 角 边框 是 由 三 个 div 元 素 边 框 合成 的 ， 这 三 个 div 元 素 设置 的 样式 名 称 
分 别 是 top、center、bot， 其 中 top 为 div 元 素 设置 border-bottom、 border-top-color、 


mE) >> 


第 6 章 边框 与 尺寸 属性 国 


border-bottom-color 等 边框 样式 。 “center” 为 div 元 素 设 置 padding、color 等 属性 。 “bot” 为 
div 元 素 设 置 border-top、border-top-color 等 边框 样式 。 这 样 我 们 的 圆 角 边框 就 形成 了 。 


6.3 ”使 用 百分比 设置 图 像 的 尺寸 


设置 页 面 元 素 的 尺寸 大 体 上 可 以 使 用 height 和 width 属性 ， 还 可 以 使 用 max-height、 
min-height 属性 来 设置 最 大 高 度 和 最 小 高 度 。 本 节 将 具体 讲解 这 些 属 性 的 应 用 。 


入 视频 教学 : 光盘 /视频 /6/63 ”使 用 百分比 设置 图 像 的 尺寸 @k 度 : 7 分 名 


6.3.1 基础 知识 一 一 height 属性 


height 属性 用 于 设置 页 面 元 素 的 高 度 。 它 可 以 定义 元 素 内 容 区 的 高 度 ， 在 内 容 区 外 面 可 以 
增加 内 边 距 、 边 框 和 外 边 距 ， 而 行内 非 蔡 换 元 素 会 忽略 这 个 属性 。 该 属性 的 可 选 值 有 4 个 ， 如 
表 6-3 所 示 。 


表 6-3 ”height 属性 值 


属性 值 说 明 
auto 默认 值 。 浏 览 器 会 计算 出 实际 的 高 度 
length 使 用 px、cm 等 单位 定义 高 度 
%, 基于 包含 它 的 块 级 对 象 的 百分比 高 度 
inherit 规定 应 该 从 父 元 素 继承 height 属性 的 值 


height 属性 的 语法 格式 ， 如 下 : 

height : auto | length 

举 个 小 例子 ， 使 用 height 属性 设置 一 个 图 片 元 素 的 高 度 ， 代 码 如 下 所 示 : 
img.big 

{ 


height: 160px  // 设 置 img 元 素 的 高 度 
1 


6.3.2 ”基础 知识 一 一 max-height 属性 


max-height 属性 用 于 设置 页 面 元 素 的 最 大 高 度 。 因 此 元 素 的 实际 高 度 值 可 以 比 指定 的 值 小 ， 
但 不 能 比 其 大 ， 并 且 不 允许 指定 负 值 。 它 的 可 选 值 有 4 个， 分 别 是 none、length、% 和 inherit。 
有 具体 描述 如 表 6-4 所 示 。 
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表 6-4 max-height 属性 值 


属性 值 说 明 

none 默认 值 。 指 元 素 无 最 大 高 度 限制 

length 定义 元 素 的 最 大 高 度 值 ， 可 以 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 不 可 为 负数 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 高 度 

inherit 规定 应 该 从 父 元 素 继承 max-height 属性 的 值 


max-height 属性 的 语法 格式 如 下 : 
max-height : none | length 
下 面 使 用 max-height 属性 设置 一 个 页 面 段 落 元 素 p 的 最 大 高 度 ， 代 码 如 下 所 示 : 


.max-height{ 
border:blue; 
border-style:double; 
max-height :50px; // 设 置 元 素 最 大 高 度 为 50px 


6.3.3 ”基础 知识 一 一 min-height 属性 


min-height 属性 用 于 设置 页 面 元 素 的 最 小 高 度 。 因此 元 素 的 实际 高 度 值 可 以 比 指定 的 值 高 ， 
但 不 能 比 其 小 ， 且 不 允许 指定 负 值 。 它 的 可 选 值 和 max-height 属性 一 样 有 4 个， 分 别 是 none、 
length、% 和 inherit。 它 们 的 使 用 方法 也 和 max-height 属性 的 4 个 值 大 致 相同 。 在 此 就 不 再 详 
讲 。 它 的 语法 格式 如 下 所 示 : 

min-height : none | length 

下 面 使 用 min-height 属性 再 来 设置 一 下 段落 元 素 p 的 最 小 高 度 ， 代 码 如 下 所 示 : 


.min-height{ 
border:blue; 
border-style:double; 
min-height:50px; // 设 置 元 素 最 小 高 度 为 50px 


6.3.4 ”基础 知识 一 一 width 属性 


width 属性 用 于 设置 页 面 元 素 的 宽度 ， 可 以 定义 元 素 内 容 区 的 宽度 ， 在 内 容 区 外 面 可 以 增 
加 内 边 距 、 边 框 和 外 边 距 。 它 有 4 个 可 选 值 ， 如 表 6-5 所 示 。 
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表 6-5 width 属性 值 
属性 值 说 明 

auto, 默认 值 。 浏 览 器 可 计算 出 实际 的 宽度 
length 使 用 px、cm 等 单位 定义 宽度 
% 定义 基于 包含 块 ( 父 元 素 ) 宽 度 的 百分比 宽度 
inherit 


规定 应 该 从 父 元 素 继承 width 属性 的 值 
width 属性 的 基本 语法 如 下 所 示 : 
width : auto | length 


下 面 我 们 使 用 width 属性 来 设置 img 元 素 的 宽度 。 代 码 如 下 所 示 : 
<html> 
<head> 
<style type="text/css"> 
img 
{ 
width: 250px 
} 
</style> 
</head> 
<body> 


<img src="top.png" /> 
</body> 
</html> 


图 片 原来 为 495px， 设 置 width 为 250px。 效 果 如 图 6-10 所 示 。 
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6-10 ”设置 图 片 的 width 属性 


6.3.5 ”基础 知识 一 一 max-width 属性 


max-width 属性 用 于 设置 页 面 元 素 的 最 大 宽度 ， 即 对 页 面 元 素 的 宽度 设置 一 个 最 高 限制 。 
因此 ， 元 素 可 以 比 指定 值 窄 ， 但 不 能 比 其 宽 。 不 允许 指定 为 负 值 。 它 的 可 选 值 有 4 个 ， 分 别 是 


< 
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none、length、% 和 inherit。 具 体 说 明 如 表 6-6 所 示 。 
表 6-6 max-width 属性 值 


属性 值 说 明 
none 默认 值 。 定 义 对 元 素 的 最 大 宽度 没有 限制 
length 定义 元 素 的 最 大 宽度 值 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 宽度 
inherit 规定 应 该 从 父 元 素 继承 max-width 属性 的 值 


max-width 属性 的 基本 语法 格式 ， 如 下 所 示 : 
max-width : none | length 
下 面 来 看 看 如 何 使 用 max-width 属性 来 设置 div 元 素 的 最 大 宽度 。 代 码 如 下 所 示 : 


.max-widtht{ 
border:blue; 
border-style:double; 
max-width:100px; // 设 置 元 素 最 大 宽度 为 100px 


6.3.6 ”基础 知识 


min-width 属性 用 于 设置 页 面 元 素 的 最 小 宽度 ， 即 对 页 面 元 素 的 宽度 设置 一 个 最 小 限制 。 
因此 , 元 素 可 以 比 指定 值 宽 , 但 不 能 比 其 窄 。 不 允许 指定 为 负 值 。 它 有 4 个 可 选 值 , 分 别 是 none、 
length、% 和 inherit， 如 表 6-7 所 示 。 
表 6-7 min-width 属性 值 


min-width 属性 


属性 值 说 明 
none | 默认 值 。 定 义 对 元 素 的 最 小 宽度 没有 限制 
length 定义 元 素 的 最 小 宽度 值 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 小 宽度 
inherit 规定 应 该 从 父 元 素 继承 min-width 属性 的 值 


min-width 属性 的 基本 语法 格式 ， 如 下 所 示 : 
min-width : none | length 
使 用 min-width 属性 来 设置 页 面 div 元 素 的 最 小 宽度 ， 代 码 如 下 所 示 : 


.min-widtht{ 
border:blue; 
border-style:double; 
min-width:100px; // 设 置 元 素 最 小 宽度 为 100px 
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6.3.7 ”实例 描述 


有 时 需要 图 片 在 页 面 中 显示 各 种 大 小 样式 , 如何 设 置 图 片 大 小 呢 ? 本 节 实 例 将 演示 使 用 百 
分 比 属性 值 来 设置 图 像 的 尺寸 。 


6.3.8 实例 应 用 


【 例 6-3】 使 用 百分比 设置 图 像 的 尺寸 
在 项 目 CSS_6 的 WebRoot 目录 下 新 建 一 个 size.html 文件 ， 在 该 文件 中 使 用 百分比 属性 值 
设置 图 像 的 尺寸 ， 代 码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 


<html> 
<head> 
<style type="text/css"> 
img.normal // 自 动 设置 图 像 宽 高 尺寸 
t 
height:auto; 
width:auto 
} 
img.big // 按 20% 的 比例 放大 图 像 尺寸 
{ 
height: 20%; 
width:20%; 
} 
img.small // 按 10% 比 例 缩小 图 像 尺寸 
{ 
height: 10%; 
width:10%; 
} 
</style> 
</head> 
<body> 


<img class="normal" src="images/xin.gif" /> 


<br /> 

<img class="big" src="images/xin.gif" /> 

<br /> 

<img class="small" src="images/xin.gif" /> 
</body> 


</html> 


<@— 
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6.3.9 运行 结果 


在 正 浏 览 器 中 打开 size.html 文件 ， 可 以 看 到 


使 用 百分比 设置 图像 的 尺寸 本 ind 


图 像 尺寸 设置 效果 ， 如 图 6-11 所 示 。 


x 
而 面 中 ”安全 GS)- TI 有 中 全- ” 
号 起 成 为 会 员 吗 ? 画 
病 入 姓名 - 


葵 入 理 码 - 


图 6-11 使 用 百分比 设置 图 像 的 尺寸 
6.3.10 ”实例 分 析 


6 源码 解析 : 


本 实例 使 用 height 和 width 属性 的 auto( 自 动 调整 ) 和 百分比 值 来 设置 图 像 的 尺寸 ， 这 样 图 
像 就 可 以 以 不 同 大 小 显示 在 页 面 中 。 


6.4 


常见 问题 解答 
6.4.1 CSS 边框 错误 

器: CSS 边框 混乱 错误 。 

[2 团 。 网 络 课堂 : 


http://bbs.itzcn.com/thread-12269-1-1.html 
有 边框 ， 则 不 会 了 


对 于 两 个 连续 的 边框 , 如 果 第 二 个 边框 的 上 边 距 为 负 值 并 且 该 边框 或 它 的 一 个 上 级 边框 具 


E 确 显示 这 些 边框 。 这 个 问题 怎么 解决 ? 


【解决 办 法 】 两 个 连续 的 边框 ”如 果 第 二 个 框 的 上 边 距 为 负 值 ， 那 么 理论 上 它 会 覆盖 上 一 
个 边框 的 一 定位 置 。 但 这 两 个 边框 是 独立 的 , 如 果 没 有 在 边框 上 使 用 relative 属性 , 那么 Z-index 
mB >> 


: 第 6 章 边框 与 尺寸 属性 轩 


属性 也 不 起 作用 。 这 样 浏览 器 也 不 知道 该 显示 哪 一 个 ?当然 会 产生 冲突 了 。 
负 值 的 边 距 只 能 当 第 二 个 边框 嵌 套 在 第 一 个 边框 中 时 才 会 显示 。 或 是 对 它们 设置 了 relative 
才 起 作用 。 


6.4.2 CSS 的 边框 显示 有 问题 


CSS 的 边框 显示 有 问题 
网 络 课堂 : http:Wbbs.itzcn.comythread-12271-1-1.html 

我 在 CSS 中 添加 了 这 么 一 条 语句 : 

border-bottom: solid 80%; 

用 的 是 傲游 浏览 器 ， 但 是 这 个 边框 经 常 不 能 显示 ， 但 是 有 时 候 刷 新 几 下 就 可 以 了 。 请 问 是 
什么 原因 呢 。 求 高 手 明示 。 

【解决 办 法 】 由 于 边框 宽度 border-width 的 属性 值 是 不 会 继承 的 ， 那 么 就 不 能 使 用 百分数 

来 定义 边框 宽度 border-width。 你 可 以 参考 这 种 模式 : 


border-bottom: lpx solid black; 


1. 填空 题 


(1) 边框 的 样式 可 以 包含 的 值 有 : 粗细 、 颜 色 和 
(2) CSS 中 ，div 的 属性 包括 margin、padding 和 


(3) max-height 属性 用 于 设置 页 面 元 素 的 高 度 。 
2. 选择 题 
(1) 为 页 面 div 元 素 设置 底部 边框 颜色 的 属性 是 
A. border-style B. border-color 
C. border-bottom-color D. border-top-color 
(2) 下 面 用 来 设置 左边 框 样式 的 属性 是 
A. border-left-style B. border-style 
C. border-bottom-style D. border-right-style 
(3) 使 用 max-height 属性 设置 div 元 素 最 大 高 度 为 50px 的 代码 正确 的 是 
A 
divf{ 


style:double; 
max-height:50px; 


<O@——— 
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B. 
div.divt{ 
style:double; 
max-height:50px; 
} 
Es 
div{ 
border-style:double; 
max-height:50px; 
1 
D; 
div.div{ 
border-style:double; 
max-height:50px; 
1 
(4) 边框 的 样式 可 以 包含 的 值 有 
A， 宽 高 B. 颜色 C. 边 距 D， 长 短 
3. 上 机 练习 


上 机 练习 : 为 图 片 设置 双边 杠 

练习 要 求 : 首先 在 页 面 body 元 素 中 添加 一 个 img 元 素 ， 再 设置 img 元 素 的 边框 ， 然 后 设 
置 图 片 边框 为 绿色 ， 图 片 与 边框 的 间距 为 Spx， 最 后 设置 背景 色 为 red。 这 样 看 起 来 图 片 就 有 
了 双边 框 。 执行 效果 如 图 6-12 所 示 ( 本 练习 结果 使 用 正 浏览 器 将 无 法 完全 显示 ， 因 此 使 用 火狐 
浏览 器 )。 


为 图 片 设置 双边 杠 - Firefox - 火 充 中 国 版 
立 们 中 ) 篇 缉 下) 查看 中 历史 全 ) 书签 虽 ) 工具 TT 帮助 0 


0 CX 人 NX DO ss -| PB :Ny 


上 为 图 片 设置 对 边框 | 性 


图 6-12 为 图 片 设置 双边 框 


>> 
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内 容 摘 要 : 

在 设计 页 面 时 ， 要 保证 页 面 元 素 出 现在 适当 的 位 置 ， 常 常 需要 使 用 表格 来 完成 。 这 是 因为 
表格 包含 的 边框 能 够 为 整个 页 面 建立 复杂 的 结构 , 而且 还 能 使 页 面 看 起 来 更 加 美观 、 整洁 。 CSS 
中 的 边 距 和 间隙 属性 就 提供 了 这 样 一 种 功能 ， 能 够 为 页 面 元 素 定义 边框 ， 并 修改 内 容 间 距 ， 从 
而 优化 文本 内 容 的 显示 效果 。 

学 习 目标 : 

@ 掌握 设置 元 素 边 距 的 属性 

@ 掌握 设置 元 素 间 隙 的 属性 


7.1 边 距 与 间隙 的 概念 


CSS 中 , 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 元 素 框 。 盒 子 模型 (Box Model) 规 定 
了 元 素 框 处 理 元 素 内 容 、 间 隙 、 边 框 和 外 边 距 的 方式 。 元 素 框 描述 了 元 素 及 其 属性 在 页 面 布局 
中 所 占 的 空间 大 小 ， 因 此 元 素 框 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 比 如 ， 页 面 中 第 一 个 元 素 框 
为 10px， 那 么 下 一 个 元 素 框 就 处 于 离 顶部 10px 距离 的 位 置 。 如 果 第 一 个 元 素 框 增加 为 20px， 
则 下 一 个 元 素 框 就 要 再 下 移 10px。 而 整个 页 面 就 是 由 这 些 大 大 小 小 , 但 又 不 会 重 县 的 元 素 框 构 
成 的 。 

元 素 框 最 里 面 的 部 分 是 实际 的 内 容 ， 直 接 包围 内 容 的 是 间隙 。 间 隙 呈现 了 元 素 的 背景 。 间 
隙 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 ， 外 边 距 默认 是 透明 的 ， 因 此 不 会 遮挡 其 后 的 任何 元 素 ， 
示意 图 如 图 7-1 所 示 。 


上 外 边线 
上 边 距 
上 边框 
上 间隙 

上 内 边线 


A 
胃 兰 闭 
EF 
ER 
前 党 计 
吓 尝 计 
小 乱 闻 计 


下 内 边线 
下 间隙 
下 边框 


下 边 距 
下 外 边线 


7-1 区 块 示意 图 


从 示意 图 中 可 以 清楚 地 看 到 边框 与 间隙 所 控制 的 区 域 。 其 中 元 素 框 就 是 那个 最 深 阴 影 的 矩 
形 框 。 这 时 ， 有 的 读者 可 能 会 问 ， 边 距 和 间隙 产生 的 作用 都 是 定义 距 边界 的 距离 ， 两 者 有 什么 
区 别 呢 ? 
其 实 ， 边 距 和 间隙 最 大 的 区 别 就 在 于 背景 的 显示 。 例 如 : 
<P style="margin:20mm; background-color:yellow"> 
Css 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 元 素 框 。 
</p> 
<p style="margin:30mm; padding:5mm; background-color:yellow"> 
Css 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 元 素 框 。 
</p> 
在 上 面 的 代码 中 ， 第 一 个 段落 设 定 了 边 距 及 背景 色 ， 第 二 个 段落 设 定 了 边 距 、 间 隙 及 背景 
色 ， 运 行 该 页 面 ， 效 果 如 图 7-2 所 示 。 


第 7 章 ， 边 距 与 间隙 属性 | 


图 7-2 边 距 与 间隙 的 区 别 


从 图 7-2 中 可 以 看 出 ， 第 一 个 段落 只 设 定 了 边 距 ， 而 背景 色 只 显示 在 元 素 框 区 域 ， 这 说 明 
背景 色 不 作用 于 边 距 。 第 二 个 段落 设 定 了 间隙 ， 而 背景 色 除了 显示 在 元 素 框 区 域 ， 也 覆盖 了 间 
隙 区 域 ， 这 说 明 背 景色 作用 于 间隙 。 

间隙 、 边 框 和 边 距 都 是 可 选 的 ， 默 认 值 是 零 。 但 是 ， 许 多 元 素 将 由 用 户 代理 样式 表 设 置 边 
距 和 间隙 。 可 以 通过 将 元 素 的 margin 和 padding 设置 为 零 来 覆盖 这 些 浏览 器 样式 。 这 可 以 分 别 
进行 ， 也 可 以 使 用 通用 选择 器 对 所 有 元 素 进行 设置 。 例 如 : 


pl 


margin: 0; 
padding: 0; 


7.2 ”水果 价格 表格 


有 时 页 面 元 素 之 间 有 一 些 间 距 ， 可 以 使 页 面 更 加 简洁 美观 ， 这 就 是 本 节 将 要 介绍 的 设置 元 
素 边 距 的 属性 .分别 有 : 设置 元 素 上 外 边 距 属性 margin-top、 设 置 元 素 右 外 边 距 属性 margin-right、 
设置 元 素 下 外 边 距 属性 margin-bottom 和 设置 元 素 左 外 边 距 属性 margin-left。 


ce 视频 教学 : 光盘 /视频 /7/7.2 水果 价 格 表格 .avi 长 度 : 10 分 钟 
7.2.1 基础 知识 一 一 margin-top 属性 


margin-top 属性 用 于 设置 页 面 元 素 的 上 外 边 距 。 该 属性 的 可 选 值 如 表 7-1 所 示 。 
表 7-1 margin-top 属性 的 取 值 与 说 明 


属性 值 说 明 
i 浏览 器 设置 的 上 外 边 距 

length | 定义 固定 的 上 外 边 距 。 默 认 值 是 0 

% | 定义 基于 父 对 象 总 高 度 的 百分比 上 外 边 距 
et 规定 应 该 从 父 元 素 继承 上 外 边 距 


< 人 mm 
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margin 属性 的 基本 语法 格式 如 下 所 示 : 

margin-top : auto | length 

使 用 margin-top 属性 来 设置 页 面 p 元 素 的 上 外 边 距 ， 代 码 如 下 所 示 : 
p-.topmargin { 


margin-top: lcm 


1 
设置 完毕 之 后 ， 运 行 效果 如 图 7-3 所 示 。 
设置 上 外 边 距 - Windows Internet Explorer 


GO Ev 
斌 收 京 天 。 起 设置 [外边 息 


本 区 


"页面 四 ”安全 G) 工具) - 避 - 


该 段落 没有 设置 上 外 边 距 , 


该 段落 带 有 设置 的 上 外 边 距 。 


图 7-3 设置 上 外 边 距 的 实例 运行 效果 


7.2.2 ”基础 知识 一 一 margin-right 属性 


margin-right 属性 用 于 设置 页 面 元 素 的 右 外 边 距 。 该 属性 的 可 选 值 如 表 7-2 所 示 。 
表 7-2 margin-right 属性 的 取 值 与 说 明 


属性 值 说 明 
auto 浏览 器 设置 的 右 外 边 距 
length 定义 固定 的 右 外 边 距 。 默 认 值 是 0 
% 定义 基于 父 对 象 总 高 度 的 百分比 右 外 边 距 
inherit 规定 应 该 从 父 元 素 继承 右 外 边 距 


margin-right 属性 的 基本 语法 格式 如 下 所 示 : 


margin-right : auto | length 


使 用 margin-right 属性 来 设置 页 面 div 元 素 的 右 外 边 距 为 12mm， 代 码 如 下 所 示 : 
div.rightmargin 

margin-right:12mm; 

background-color:yellow; 


在 浏览 器 中 的 运行 效果 如 图 7-4 所 示 。 
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设置 右 让 边 下 -Windows 


0: weecss Ter Gn risht hil 到 [4 x 


5 者， 页 面 ) 安全 和- 工具 各 改 - ” 


帘 收 天 乔 设 置 丰 外 小 


图 7-4 设置 右 外 边 距 的 实例 运行 效果 


7.2.3 ”基础 知识 一 一 margin-bottom 属性 


margin-bottom 属性 用 于 设置 页 面 元 素 的 下 外 边 距 ， 该 属性 的 可 选 值 如 表 7-3 所 示 。 


属性 值 


表 7-3 margin-bottom 属性 的 取 值 与 说 明 


说 明 


auto 
length 
% 


inherit 


浏览 器 计算 下 外 边 距 

规定 以 具体 单位 计 的 下 外 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 Opx 
规定 基于 父 元 素 的 宽度 的 百分比 的 下 外 边 距 

规定 应 该 从 父 元 素 继承 下 外 边 距 


margin-bottom 属性 的 基本 语法 格式 如 下 所 示 : 


margin-bottom : auto | length 


使 用 margin-bottom 属性 设置 div 元 素 的 下 外 边 距 为 cm， 代 码 如 下 所 示 : 
.marginbottom{ 
margin-bottom:1cm; 


} 


在 浏览 器 中 的 运行 效果 如 图 7-5 所 示 。 


设置 div 元 素 下 外 边 距 - Windows Internet Explorer 
GO- rvs wre hl 


诊 收 关 夹 。 攻 设 置 4iv 元 素 下 外 边 距 入 -四 - 习 昼 ”页 面 和 Dj 安 全曲 I 具 中 - 力 - 


该 div 元 素 设 置 了 下 外 边 距 


该 dv 元 素 没有 设置 下 外 边 距 


7-5 设置 div 元 素 下 外 边 距 的 实例 运行 效果 


7.2.4 基础 知识 一 一 margin-left 属性 


margin-left 属性 用 于 设置 元 素 的 左 外 边 距 ， 它 的 可 选 属性 值 如 表 7-4 所 示 。 
margin-left 属性 的 基本 语法 格式 如 下 所 示 : 


margin-left : auto | length 


< 


表 7-4 margin-left 属性 的 取 值 与 说 明 


属性 值 说 明 
auto 浏览 器 设置 的 左 外 边 距 
length 定义 固定 的 左 外 边 距 。 默 认 值 是 0 
% 定义 基于 父 对 象 总 高 度 的 百分比 左 外 边 距 
inherit 规定 应 该 从 父 元 素 继承 左 外 边 距 


下 面 使 用 百分比 来 设置 div 元 素 的 左 外 边 距 ， 代 码 如 下 所 示 : 


.marginleft{ 
margin-left: 40% 
} 


在 浏览 器 中 运行 的 效果 如 图 7-6 所 示 。 


议 置 div 元 素 左 外 边 现 
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该 dn 元 素 设 置 了 左 外 边 算 
该 dn 元 素 没 有 设置 左 外 边 距 
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图 7-6 设置 div 元 素 左 外 边 距 的 运行 效果 


7.2.5 “实例 描述 


难得 轻松 一 下 ， 就 到 我 的 博客 里 看 看 ， 看 到 有 人 说 想 设 置 表格 边 距 ， 但 一 直 没 有 成 功 ， 求 
高 手 给 个 例子 。 正 好 刚 写 了 本 节 的 实例 ， 即 设置 一 个 水 果 价 格 表格 的 边 距 ， 就 给 他 发 过 去 了 ， 
实际 上 没有 什么 特别 的 ， 就 是 灵活 运用 本 节 讲 解 的 设置 上 下 左右 边 距 的 4 个 属性 ， 即 可 轻松 实 
现 。 本 节 就 把 该 案例 的 实现 方法 展示 给 大 家 ， 和 希望 对 大 家 有 所 帮助 。 


7.2.6 ”实例 应 用 


【 例 7-1】 水 果 价格 表格 
(1) 新 建 一 个 edge.html 文件 ， 在 该 文件 中 定义 一 个 水 果 价 格 表格 ， 代 码 如 下 所 示 : 


<table summary="Sample table"> 
<caption> 
水 果 价 格 表 
</caption> 
<thead> 
<tr> 
<th abbr="team" scope="col"> 水 果 名 称 </th> 
<th abbr="score” scope="col"> 单 价 </th> 
二 


mB >> 


</thead> 
<tbody> 
<tr> 
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<td> 苹 果 </td> 
<td>5.00</td> 


</tr> 
<tr> 


<tad> 香 菩 </td> 
<td>3.50</td> 


</tr> 
</tbody> 
</table> 


(2) 在 edge.html 页 面 中 使 


<style type="text/css"> 
tablel{ 


<style> 标 签 添加 表格 边 距 设置 ， 代 码 如 下 所 示 : 


border: 5px solid black; 


margin-left: S50px; 


margin-right: 1l0px; 
margin-top: 15px; 
margin-bottom: 40px; 


width: 200px; 


} 
td tht{ 
background: white; 
horizontal-align: right; 
} 
</style> 


7.2.7 ”运行 结果 


在 正 浏览 器 中 打开 edge.html 文件 ， 执 行 效果 如 图 7-7 所 示 。 
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7-7 ”设置 表格 边 距 的 实例 运行 效果 
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7.2.8 实例 分 析 


6 源码 解析 : 


本 实例 综合 使 用 margin-top、margin-right 等 属性 设置 表格 的 上 外 边 距 为 15px, 下 外 边 距 为 
40px。 因 此 在 执行 效果 中 图 片 与 表格 之 间 有 一 定 的 间距 ， 左 外 边 距 为 50px， 右 外 边 距 为 10px。 
另外 ， 还 使 用 border 属性 设置 表格 的 边框 样式 。 


7.3 设置 段落 的 整体 边 距 


上 节 介 绍 了 使 用 margin-top、margin-right、margin-bottom 和 margin-left 来 设置 页 面 元 素 的 
上 下 左右 边 距 。 本 节 介绍 一 个 使 用 更 方便 的 属性 margin， 它 可 以 设置 元 素 的 上 下 左右 边 距 。 


上 视频 教学 : 光盘 /视频 /7173 设置 段落 的 整体 边 距 avi 人 长度: 4 分 名 


7.3.1 基础 知识 一 一 margin 属性 


margin 可 译 为 “外 边 距 ”或 者 “外 补 白 ”。 它 是 盒子 模型 (box model) 的 基础 属性 。 

margin 属性 包括 4 个 子 属性 , 分别 是 margin-top、margin-right、 margin-bottom、 margin-left， 
可 以 用 来 设置 box 的 margin area。 属性 margin 可 以 用 来 同时 设置 box 的 四 边 外 边 距 , 而 margin 
属性 的 4 个 子 属性 只 能 设置 各 自 的 外 边 距 。margin 属性 包含 的 四 个 子 属性 ， 如 表 7-5 所 示 。 


表 7-5 margin 属性 的 子 属性 及 其 描述 


margin-bottom 


marpin-left 


各 子 属性 的 属性 值 可 以 是 一 个 确定 的 长 度 ， 也 可 以 是 一 个 百分比 ， 该 百分比 相对 于 其 上 级 
元 素 的 宽度 (widthb)。 各 属性 值 的 默认 值 均 为 0。 
margin 属性 的 可 选 值 ， 和 它 的 子 属性 的 可 选 值 相同 ， 分 别 是 auto、length、% 和 inherit。 
margin 属性 可 以 一 次 性 定义 上 下 左右 的 边 距 ， 语 法 格式 如 下 所 示 : 
margin: [margin-top] [margin-right] [margin-bottom] [margin-left] 
》$ 四 个 子 属性 的 顺序 应 该 严格 遵循 ， 如 果 定 义 出 错 ， 则 页 面 的 布局 将 不 会 按照 预计 


注意 的 效果 显示 。 但 是 ， 这 四 个 子 属性 的 值 的 单位 却 可 以 不 统一 ， 例 如 : 上 边 距 设 为 
5cm， 下 边 距 设 为 4mm。 
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如 果 上 、 下 、 左 、 右 这 四 个 边 距 相等 ， 那 么 可 以 只 设 定 一 个 margin 属性 值 ， 例 如 : 
margin:15mm // 设 置 上 、 下 、 左 、 右 边 距 都 为 1 5mm 


7.3.2 ”实例 描述 
记得 以 前 有 个 同事 说 段落 不 能 设置 边 距 。 因 为 自己 也 没有 特别 注意 过 这 一 点 ， 所 以 也 不 太 


清楚 ， 不 过 通过 本 节 实 例 演示 得 出 段落 元 素 是 可 以 设置 边 距 的 ， 学 习 还 是 得 亲自 动手 试 试 才能 
有 更 深入 的 收获 呀 。 


7.3.3 ”实例 应 用 


【 例 7-2】 设 置 段落 的 整体 边 距 
(1) 新 建 一 个 margin-example.html 文件 ， 在 该 文件 中 定义 两 个 段落 元 素 ， 显 示 两 首 古诗 ， 
代码 如 下 所 示 : 


<p class="margin"> 西 江 月 。 夜行 黄 沙 道中 
宋 辛弃疾 
明月 别 枝 惊 更 ， 清 风 半夜 鸣 蝉 。 
稻 花 香里 说 丰年 ， 听 取 蛙 声 一 片 。 
七 八 个 星 天 外 ， 两 三 点 雨山 前 。 
旧时 茅 店 社 林 边 ， 路 转 溪 桥 包 见 。 
</p> 
<p>《 把 酒 问 月 》 
青天 有 月 来 几时 ， 我 今 停 杯 一 问 之 : 
人 攀 明 月 不 可 得 ， 月 行 却 与 人 相 随 ? 
拉 如 飞 镜 临 丹 六 ， 绿 烟 灭 尽 清 辉 发 ? 
但 见 宵 从 海上 来 ， 宁 知晓 向 云 间 没 ? 
白 免 的 药 秋 复 春 ， 嫦 娥 孤 栖 与 谁 邻 ? 
今 人 不 见 古 时 月 ， 今 月 曾经 照 古 人 。 
古人 今 人 若 流水 ， 共 看 明月 皆 如 此 。 
唯 愿 当 歌 对 酒 时 ， 月 光 长 照 金 构 里 。 
</p> 


(2) 设置 class="margin" 的 p 元 素 的 边 距 ， 代 码 如 下 所 示 


<style type="text/css"> 
.margin{ 
margin: 2% 100px 0.5cm 60px; 
border: 3px solid red 7 
} 
</style> 


<@—— 
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7.3.4 运行 结果 


在 正 浏 览 器 中 打开 margin-example.html 文件 ， 执 行 效果 如 图 7-8 所 示 。 
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朋克 下 克 有 
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图 7-8 设置 段落 整体 边 距 的 实例 运行 效果 


7.3.5 ”实例 分 析 


6 源码 解析 : 


本 实例 在 页 面 中 定义 了 两 个 p 元 素 ， 为 第 一 个 了 元 素 设置 了 class 属性 ， 其 值 为 margin， 
使 用 margin 属性 为 class="margin" 的 p 元 素 设置 边 距 ， 使 用 border 属性 设置 边框 样式 。 


7.4 设置 图 片 间隙 


学 习 了 设置 元 素 的 边 距 属 性 ， 那 么 有 设置 元 素 内 部 间隙 的 属性 吗 ? 答案 是 肯定 的 ， 本 节 就 
将 分 别 讲解 设置 元 素 上 间隙 属性 padding-top、 设 置 元 素 右 间隙 属性 padding-right、 设 置 元 素 下 
间隙 属性 padding-bottom 和 设置 元 素 左 间隙 属性 padding-left。 


上 视频 教学 : 光盘 /视频 /717.4 设置 图 片 间隙.avi @k 度 : 6 分 钟 


7.4.1 基础 知识 一 一 padding-top 属性 


padding 属性 用 于 设置 元 素 上 间 降 的 宽度 ， 不 允许 指定 负 间 隙 值 。 该 属性 的 可 选 值 如 表 7-6 


Ed >> 
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S 
所 示 。 
表 7-6 padding-top 属性 的 取 值 与 说 明 
属性 值 说 明 
length | 规定 以 具体 单位 计 的 固定 的 上 间隙 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 0px 
% | 定义 基于 父 元 素 宽度 的 百分比 上 间隙 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 浏览 器 中 
inherit 规定 应 该 从 父 元 素 继承 上 间隙 


@ 对 于 内 联 元 素 设置 的 上 间隙 不 会 影响 行 高 计算 ， 因 此 ， 如 果 一 个 元 素 既 有 间隙 又 
法 江 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容重 登 。 
padding 的 基本 语法 格式 如 下 所 示 : 
padding-top : length 
设置 页 面 div 元 素 的 上 间隙 为 2cm， 代 码 如 下 所 示 : 
.paddingtop{ 
padding-top: 2cm; // 设 置 div 元 素 的 上 间隙 


border: lpx solid green; 


} 
在 浏览 器 中 运行 此 代码 的 效果 如 图 7-9 所 示 。 
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图 7-9 设置 div 元 素 上 间隙 的 实例 运行 效果 


7.4.2 ”基础 知识 一 一 padding-right 属性 


padding-right 属性 用 于 设置 元 素 的 右 间隙， 不 能 使 用 负 值 ， 行 内 非 蔡 换 元 素 上 设置 的 右 间 
隙 仅 在 元 素 所 生成 的 第 一 个 行内 框 的 右边 出 现 。 它 的 可 选 值 如 表 7-7 所 示 。 


表 7-7 padding-right 属性 的 取 值 与 说 明 


属性 值 说 明 
length 规定 以 具体 单位 计 的 固定 的 右 间隙 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 0px 


% 定义 基于 父 元 素 宽 度 的 百分比 右 间隙 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 浏览 器 中 


inherit 规定 应 该 从 父 元 素 继承 右 间隙 
padding-right 属性 的 基本 语法 格式 如 下 所 示 : 


< 人 mm 
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padding-right : length 
设置 页 面 div 元 素 的 右 间隙 为 10%， 代 码 如 下 所 示 : 
.paddingright{ 

padding-right: 10%; // 设 置 div 元 素 的 右 间隙 


border: lpx solid green; 


} 
在 浏览 器 中 运行 此 代码 的 效果 如 图 7-10 所 示 。 
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图 7-10 设置 div 元 素 右 间隙 的 实例 运行 效果 


7.4.3 ”基础 知识 一 一 padding-bottom 属性 
padding-bottom 属性 用 于 设置 元 素 的 下 间隙 的 宽度 。 也 不 允许 指定 负 间 隙 值 。 它 的 可 选 值 
如 表 7-8 所 示 。 


表 7-8 padding-bottom 属性 取 值 与 说 明 


规定 以 具体 单位 计 的 固定 的 下 间隙 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 


定义 基于 父 元 素 宽度 的 百分比 下 间隙 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 浏览 器 中 
inherit 规定 应 该 从 父 元 素 继承 下 间隙 


同上 间 队 一样， 在 行内 非 替 换 元 素 上 设置 下 间 陈 也 不 会 影响 行 高 计算 。 因 此 一 个 
注意 | 元素 既 有 间隙 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容 
重 登 。 

padding-bottom 属性 的 基本 语法 格式 如 下 所 示 : 

padding-bottom : length 

设置 div 元 素 的 下 间隙 为 20px， 代 码 如 下 所 示 : 

.paddingright{ 

padding-right: 20px; 


border: lpx solid green; 
} 


在 浏览 器 中 运行 此 代码 的 效果 如 图 7-11 所 示 。 
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图 7-11 设置 div 元素 下 间隙 的 实例 运行 效果 


7.4.4 ”基础 知识 一 一 padding-left 属性 


padding-left 属性 用 于 设置 元 素 的 左 间隙 , 行内 非 蔡 换 元 素 上 设置 的 左 间 隙 仅 在 元 素 所 生成 
的 第 一 个 行内 框 的 左边 出 现 。 该 属性 的 可 选 值 如 表 7-9 所 示 。 


表 7-9 padding-left 的 属性 的 取 值 与 说 明 


规定 以 具体 单位 计 的 固定 的 左 间隙 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 


定义 基于 父 元 素 宽度 的 百分比 左 间隙 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 浏览 器 中 
规定 应 该 从 父 元 素 继承 左 间隙 


padding-left 的 基本 语法 格式 如 下 所 示 : 
padding-left : length 
下 面 使 用 padding-left 属性 设置 div 元 素 的 左 间隙 为 30%， 代 码 如 下 所 示 : 


.Paddingleft{ 
padding-left: 30%; // 设 置 左 间隙 为 30% 


border: lpx solid green; 


} 
在 浏览 器 中 运行 此 代码 的 效果 如 图 7-12 所 示 。 
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图 7-12 设置 div 元 素 左 间隙 的 实例 运行 效果 


7.4.5 “实例 描述 


前 段 时 间 在 论坛 中 碰 到 了 这 样 一 个 学 习 者 ， 他 想 做 个 商城 网 站 ， 但 他 做 的 显示 商品 的 图 片 
总 是 没有 间隙 ， 都 连 在 一 起 显示 ， 不 知道 该 如 何 处 理 ? 

实际 上 这 个 问题 利用 本 节 学 习 的 内 容 即 可 解决 ， 下 面 就 来 看 看 本 节 的 实例 设置 图 片 的 间 
隙 ， 使 图 片 与 文字 美观 地 显示 在 页 面 中 。 
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7.4.6 实例 应 用 


【 例 7-3】 设 置 图 片 间隙 
(1) 新 建 一 个 img_padding html 文件 , 在 该 文件 中 定义 一 个 div 元 素 , 接着 在 div 元 素 中 定 
义 一 个 img 元 素 ， 代 码 如 下 所 示 : 
<div id="content"> 


<h1> 欢 迎 进入 绿色 家 园 </h1> 


<p> 


<img src="images/home imgl.jpg" width="197" height="136" alt="" 

title="" /> 
绿色 家 园 坐落 在 奉贤 区 金 汇 镇 的 泰 日 ， 占 地 面积 30000 平方 米 ， 建 筑 面积 50090 平方 米 ， 
由 多 层 住宅 组 成 。 泰 日 是 个 百年 古镇 ， 医 院 、 银 行 、 学 校 、 超 市 ， 一 应 俱全 ， 还 有 24 小 时 
医生 上 门 护理 , 小 区 拥有 两 条 天 然 河 流 , 被 绿色 环绕 ， 南 面 是 植物 园 ， 北面 是 钓鱼 度假 村 。 这 
里 天 蓝 、 地 绿 、 水 清 、 空 新 ， 是 完美 的 养老 胜地 。 

</p> 
</div> 


(2) 新 建 一 个 screen.css 文件 ， 在 该 文件 中 设置 img_padding.html 文件 的 样式 ， 代 码 如 下 
所 示 : 


hl { 
font-size: 14px; 
font-weight: bold; 
color: #690; 
} 
img { 
float: right; 
padding-left: 10px; // 设 置 图 片 的 左 间隙 
padding-right: 10px; // 设 置 图 片 的 右 间隙 
} 


#content { 
width: 570px; 
margin: Opx 200px Spx 120px; 
padding: 10px; 
background-color: #FFF; 
border: lpx solid #DDD; 


7.4.7 ”运行 结果 


代码 编写 完成 之 后 , 在 正 浏览 器 中 打开 img_padding.html 文件 , 执行 效果 如 图 7-13 所 示 。 
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图 7-13 设置 图 片 间隙 


7.4.8 实例 分 析 


nn 


本 实例 使 用 padding-left 和 padding-right 属性 设置 图 片 的 左 间隙 和 右 间隙 ， 使 图 片 与 文字 
的 排版 整齐 美观 。 


7.5 设置 交易 笔 数 表格 的 间隙 


通过 前 面 的 学 习 ， 设 置 页 面 元 素 边 距 和 间隙 的 工作 都 能 够 完成 了 ， 但 是 同样 CSS 也 提供 
了 一 个 方便 设置 页 面 间隙 的 属性 padding, 仅 使 用 它 也 可 以 完成 设置 元 素 上 下 左右 间隙 的 工作 。 


只 视频 教学 : 光盘 /视频 /717.5 ”设置 交易 笔 数 表格 的 间隙 .avi 人 @@ 长 度 : 4 分 钟 


7.5.1 基础 知识 一 一 padding 属性 


padding 属性 用 于 设 定 元 素 框 与 边 距 之 间 的 间隙 的 宽度 。 该 属性 能 为 元 素 框 定义 上 、 下 、 
左 、 右 间隙 的 宽度 , 也 可 以 单独 定义 各 方位 的 宽度 , 这 就 要 依赖 于 padding-top、padding-bottom、 
padding-left 和 padding-right 四 个 子 属性 ， 如 表 7-10 所 示 。 


表 7-10 padding 属性 的 子 属 性 及 其 描述 


子 属性 描 述 
padding-top 设 定 上 间隙 
adding-bottom 设 定 下 间隙 
padding-left 设 定 左 间隙 
padding-right 设 定 右 间隙 


<Cmmm 
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padding 属性 的 可 选 值 和 它 的 子 属性 相同 ， 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 
上 级 元 素 的 百分比 。 下 面 看 一 个 简单 的 例子 ， 设 置 一 个 div 元 素 的 上 下 左右 间隙 ， 代 码 如 下 
所 示 : 
-padding { 
padding: lcm 10px 20% 3cm // 设 置 div 元 素 上 下 左右 间隙 
} 


在 浏览 器 中 运行 此 代码 的 效果 如 图 7-14 所 示 。 


设置 div 元 走 间 碌 - Windows Internet Explorer 
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7-14 设置 div 元 素 间隙 的 实例 运行 效果 


7.5.2 ”实例 描述 


在 页 面 中 显示 一 些 统计 结果 数据 ， 一 般 情 况 下 采用 表格 的 形式 。 但 仅 使 用 table 元 素 生 成 
的 表格 不 太美 观 ， 为 了 使 表格 数据 显示 得 更 加 整齐 美观 ， 可 以 通过 设置 表格 的 间隙 ， 或 表格 包 
含 的 元 素 tr、 也 的 间隙 。 本 节 实 例 将 具体 演示 如 何 实 现 这 些 操作 。 


7.5.3 ”实例 应 用 


【 例 7-4】 设 置 交易 笔 数 表格 的 间 阶 
(1) 新 建 一 个 table-padding.html 文件 ， 在 该 文件 中 定义 一 个 表格 用 于 统计 交易 笔 数 数据 ， 
代码 如 下 所 示 : 


<div style="text-align:center"> 
<h4> 统 计数 据 概要 </h4> 
<h5><A HREF="#everyReportCountsummary"> 交 易 笔 数 </A></h5> 
</div> 
<div id="everyReportCountSummary" style="text-align:center"> 
<table border=0 width="50%" height="200"> 
<caption> 交 易 笔 数 </caption> 
<tr> 
<th> 交 易 状 态 </th><th> 笔 数 </th> 


</tr> 
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区 在 下 过 
<td class="alt"> 创 建 笔 数 </td><td class="alt">123</td> 
</tr> 
二 下 2 
<td> 付 款 笔 数 </td><td>343</td> 
</tr> 
二 下 > 
<td class="alt"> 发 货 笔 数 </td><tqd class="alt">122</td> 
</tr> 
er 
<td> 确 认 收 货 笔 数 </td><td>133</td> 
</tr> 
<tr> 
<tad class="alt"> 申 请 退 款 笔 数 </td><tqd class="alt">50</td> 
</tr> 
<tr> 
<td> 退 款 成 功 笔 数 </td><td>40</td> 
</tr> 
</table> 
</div> 


(2) 使 用 <style> 标 签 在 table-padding.html 文件 中 添加 表格 间隙 样式 ， 代 码 如 下 所 示 : 


<style type="text/css"> 
body { 
font: normal llpx auto "Trebuchet MS", Verdana, Arial, Helvetica, 
sans-serif; 
color: #4f6b72; 


overflow:visible; 
font-family:Tahoma, Helvetica,Arial, "宋体 ", sans-serif; 
color:#0047D8; 
a:hover{color: #9997D8;} 
#mytable { 
width: 700px; 
padding: 0; // 设 置 链接 间隙 
margin: 0; 
} 
caption { 
padding: 0 0 5px 0; // 设 置 表格 caption 元 素 的 间隙 
width: 700px; 
font: 18px Bold "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: center; 
. 
i 
font: bold llpx "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: lpx solid #C1DRD77 


<@—— 


6ss Web 开发 学 习 实录 


border-bottom: lpx solid #ClDAD7; 
border-top: lpx solid #C1DRD77 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; // 设 置 表格 th 元 素 的 间隙 

background: #CRE8ER Url (images/bg header.jpg) no-repeat7 
} 
th.nobg { 

border-top: 0; 

border-left: 0; 

border-right: lpx solid #C1lDAD7; 

background: none; 


I 

td { 
border-right: lpx solid #C1lDAD7; 
border-bottom: lpx solid #C1DRD77 
background: #fff; 
font-size:1lpx; 
padding: 6px 6px 6px 12px; // 设 置 表格 单元 格 的 间隙 
color: #4f6b72; 

1 

td.alt { 
background: #F5FAFA; 
color: #797268; 

1 

</style> 
7.5.4 ”运行 结果 


在 正 浏 览 器 中 打开 table-padding.html 文件 ， 执 行 效果 如 图 7-15 所 示 。 


识 置 表格 间 际 
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7-15 设置 表格 间隙 的 实例 运行 效果 
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7.5.5 “实例 分 析 


应 源码 解析 : 


本 实例 在 页 面 table-padding.html 中 定义 了 一 个 统计 交易 笔 数 数据 的 表格 ， 使 用 padding 属 
性 设置 表格 的 caption 元 素 、 也 元 素 和 td 元 素 的 间隙， 使 表格 中 的 数据 显示 得 更 加 整齐 美观 。 


7.6 常见 问题 解答 


7.6.1 消除 两 个 div 之 间 的 间隙 问题 


消除 两 个 div 之 间 的 间隙 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12391-1-1 .html 


我 想 这样 布 局 网 页 : 两 个 <div>， 每 个 div 中 含有 一 个 <ul><li>.….</li></ul>。 但 是 我 做 好 后 ， 
发 现 无 论 如 何 设置 这 两 个 div 的 样式 ， 两 个 块 之 间 总 有 间隔 。 我 现在 想 消除 这 个 间隔 ， 该 如 何 
处 理 ? 

我 的 完整 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 

<html xmlns="http://www.w3.org/1999/xhtm1l"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 布 局 </title> 

<style> 

#a { 

margin:0; 

width:700px; 
background-color: #F00 

} 

#b { 

margin:0; 
width:700px; 
background-color: #0F0 

} 

</style> 

</head> 


<body> 


<div id="a"> 
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<ul> 
<li>al</1i> 
<li>a2</1i> 
</ul> 
</div> 


<div id="b"> 
<ul> 
<1i>b1l</1i> 
<1i>b2</1i> 
</ul> 
</div> 


</body> 

</html> 

【解决 办 法 】 我 看 过 你 的 代码 了 ， 其 他 的 都 没有 问题 ， 你 只 要 在 样式 表 里 加 上 以 下 代码 就 
可 以 了 。 因 为 表单 默认 是 有 间距 的 ， 要 设置 它 的 间距 为 0。 


ul{padding:0px; margin:0px;} 


7.6.2 ” margin 边 距 问 题 


margin 边 距 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12392-1-1.html 

请 问 CSS 的 margin 边 距 问题 ?在 火狐 浏览 器 里 都 有 上 下 边 距 , 为 什么 在 正 浏览 器 中 没有 
上 下 边 距 了 ? 我 设置 的 这 个 不 管用 ， 代 码 如 下 所 示 : 

<style> 


body{ 
margin:0px; 


} 

divt{ 
border:lpx solid red; 
line-height:16px; 


Pi 
height:20px; 
border:lpx solid green; 
background:yellow; 
margin-top:100px; 
margin-bottom:100px; 
| 
</style> 
<div> 
<p>22</p> 
</div> 


mm >> 
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请 高 手 解答 。 


【解决 办 法 】 为 p 元 素 添加 样式 “margin:0; padding:0”。 这 样 火狐 浏览 器 中 的 上 下 边 距 就 
没有 了 ， 这 是 因为 火狐 浏览 器 相 比 正 浏览 器 要 严谨 一 些 。 


7.6.3 margin-top 属性 遇 到 点 小 问题 


用 CSS 的 margin-top 属性 遇 到 点 小 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12393-1-1.html 


在 一 个 单元 格 中 放 入 一 个 文本 框 和 一 个 搜索 按钮 ， 但 是 它们 不 能 水 平 对 齐 ， 我 想 用 
margin-top 属性 可 以 解决 这 个 问题 。 
代码 如 下 : 
<td width="230" height="51" align="left" valign="middle"> 
<input name="SearchText" type="text" 
style="border: lpx solid #CCCCCC; margin-left:12px" 
size="18" maxlength="100"/> 
<img src="images/search]l.jpg" 
style="margin-top:10px" width="40" height="25" /> 


</td> 
可 现在 是 文本 框 和 按钮 一 起 向 下 移动 10px， 这 个 问题 怎么 解决 ? 
【解决 办 法 】 只 需 修改 为 下 面 代码 即 可 : 


<img src="images/search]l .jpg" 
style="position:relative;top:10px" width="40" height="25" /> 


1. 填空 题 

(1) padding 属性 用 于 设置 元 素 的 间隙 ， 它 的 子 属性 有 padding-top、padding-right、 
和 padding-left. 

(2) margin 属性 可 以 设置 页 面 元 素 的 

(3) 下 面 代码 使 用 margin 属性 设置 p 元 素 的 边 距 ， 代 码 如 下 所 示 : 


.margin{ 
margin: 10% 100px 2cm 60px; 
border: 3px solid red ; 


运行 之 后 ，p 元 素 的 右边 距 为 
2. 选择 题 
(1) 下 列 CSS 属性 中 能 够 设置 侈 模 型 的 内 补丁 为 10px、20px、30px、40px( 顺 时 针 方 


< 人 EO——— 
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向 ) 的 是 


A. padding:l10px 20px 30px 40px B. padding:l0px lpx 

C. padding:Spx 20px 10px D. padding:10px 
(2) 下 列 属性 中 能 够 设置 盒 模型 的 左 侧 外 补丁 的 是 

A. margin B. indent C. margin-left D. text-indent 
(3) 定义 使 模 型 外 补丁 的 时 候 是 否 可 以 使 用 负 值 ， 

A. 是 B. 否 
(4) 下 面 关 于 CSS 中 BOX 的 padding 属性 不 包括 的 属性 值 是 2 

A. 填充 B. 上边 距 C. 底 间 陈 D.， 左边 距 
(5) CSS 中 ， 盒 模型 的 属性 包括 

A. font B. margin C. text D. visible 
3. 上 机 练习 


上 机 练习 : 为 图 片 制作 一 个 金 相 杠 
练习 要 求 : 首先 需要 在 页 面 中 添加 一 个 div 元 素 ， 然 后 在 div 元 素 中 添加 一 个 图 片 元 素 ， 


最 后 通过 设置 img 元 素 的 边 距 来 形成 一 个 相框 。 执 行 效 果 如 图 7-16 所 示 。 
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图 7-16 制作 一 个 金 相框 
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内 容 摘 要 : 

任何 网 页 都 离 不 开 背 景 的 修饰 和 丰富 的 色彩 。 没 有 颜色 的 网 页 空洞 而 没有 生机 ， 就 像 一 辆 
汽车 ， 只 有 4 个 轮子 和 方向 盘 一 样 ， 这 就 要 求 一 个 优秀 的 网 页 设计 者 不 仅 要 能 够 合理 地 安排 页 
面 布局 ， 还 要 具有 一 定 的 视觉 色彩 和 颜色 的 搭配 能 力 ， 这 样 才能 够 使 得 网 页 更 加 精美 ， 也 更 具 
有 表现 力 ， 给 浏览 者 带 来 亲切 的 感觉 。 

现在 依赖 CSS 的 强大 功能 ， 能 够 为 页 面 增加 更 多 的 色彩 和 背景 选择 ， 并 且 能 够 统一 页 面 
元 素 的 色彩 配置 ，CSS 就 像 美丽 a 经 过 汽车 修理 师 的 精心 修改 i 
有 4 个 轮子 的 汽车 做 成 万 人 瞩目 的 “法 拉 利 ”， 本 章 将 会 介绍 CSS 的 闫 色 和 背景 

学 习 目 标 : 
设置 对 象 的 文本 颜色 
设置 对 象 的 背景 图 片 
设置 背景 图 片 的 位 置 
设置 背景 图 片 的 平 铺 方式 
设置 整个 区 域 的 背景 颜色 
设置 整个 区 域 的 背景 图 片 


8.1 后 台 管 理 系统 


为 了 使 页 面 布局 更 加 合理 ， 必 须 精心 安排 各 页 面 元 素 的 位 置 、 定 义 页 面 的 颜色 搭配 以 及 字 
体 的 大 小 、 格 式 等 。 颜 色 包括 字体 以 及 背景 的 颜色 ，CSS 中 为 开发 人 员 预 设 了 16 种 颜色 及 其 
衍生 色 ， 这 16 种 颜色 是 CSS 规范 推荐 的 ， 而 且 一 些 主流 的 浏览 器 都 能 够 识别 它们 ， 本 节 通 过 
后 台 管 理 系 统 的 页 面 布局 进行 讲解 。 


EP ] 
,视频 教学 :光盘 /视频 /8/8.1 后 台 管 理 系 统 .avi @ 长 度 : 4 分 名 


8.1.1 基础 知识 一 一 background-color 属性 


background-color 属性 设置 或 检索 对 象 的 背景 颜色 。background-color 属性 接收 任何 有 效 的 
颜色 值 ， 而 对 于 没有 设 定 背 景色 的 标记 ， 默 认 背景 色 为 透明 。 下 面 通过 几 段 代码 来 讲解 如 何在 
实例 中 应 用 background-color 属性 ， 详 细 代码 如 下 所 示 : 


<p style="background-color:PaleGreen; color:Blue"> 
该 属性 填充 的 背景 是 指 元 素 框 及 间隙 所 包含 的 区 域 ， 并 位 于 前 景 的 后 面 。 
</p> 
如 果 在 主体 (<body> 标 记 ) 中 定义 了 背景 色 ， 则 该 背景 色 将 应 用 于 整个 页 面 中 ， 标 记 代 码 
如 下 : 
<body style="background-color:PaleGreen; color:Blue"> 
<p> 
该 属性 填充 的 背景 是 指 元 素 框 及 间隙 所 包含 的 区 域 ， 并 位 于 前 景 的 后 面 。 
</p> 
</body> 
同样 ，background-color 属性 可 以 在 div 元 素 中 设置 其 背景 颜色 ,还 可 以 设置 表格 等 很 多 容 
器 的 背景 颜色 。 


8.1.2 ”实例 描述 
下 面 将 以 后 台 管 理 系 统 为 例 对 页 面 优化 的 操作 方法 进行 详细 讲解 。 在 本 案例 中 ， 首 先 需 要 
将 列表 页 面 中 的 所 有 字体 颜色 设置 为 黑色 ， 将 特殊 数据 以 红色 高 亮 显 示 。 将 列表 表格 背景 颜色 


设置 为 生 FFFFF， 当 执行 链接 操作 、 未 链接 、 鼠 标 经 过 、 激 活 操 作 以 及 已 访问 后 等 操作 时 的 颜 
色 将 发 生 改 变 。 


8.1.3 ”实例 应 用 


【 例 8-1】 后 台 管 理 系统 


mt >> 


全 


首先 在 页 面 列表 中 设置 所 有 字体 颜色 为 黑色 ,特殊 字符 则 用 红色 高 亮 显 示 。 在 这 里 只 需要 
设置 color 属性 即 可 ， 详 细 代码 如 下 所 示 : 


<tr style="color:red; background-color:#FFFFFF"> 
<td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE]1"> 
<input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" /> 
</div></td> 
<td height="18" 
bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1"> 
R0012</div></td> 
<td height="18" 
bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">192.168.0.124 
</div></td> 
<td height="18" 
bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">wtz fh</div></td> 
<td height="18" 
bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">DBserVer</div> 
</td> 
<td height="18" bgcolor="#FFFFFF"><div align="center" ><a 
href="#"> 服 务 器 进程 配置 </a></div></td> 
<td height="18" bgcolor="#FFFFFF"><div align="center"><img 
src="images/037.gif" width="9" height="9" /><span class="STYLE1"> [</span><a 
href="#"> 编 辑 </a><span class="STYLE1">]</span></div></td> 
<td height="18" bgcolor="#FFFFFF"><div align="center"><span class= 
"STYLE2"><img src="images/010.gif" width="9" height="9" /> </span><span class= 
"STYLE1"> [</span><a href="#"> 删 除 </a><span class="STYLE1">]</span></div></td> 
</tr> 


在 上 述 代码 中 ， 通 过 设置 tr 标记 的 color 属性 将 特殊 数据 的 信息 高 亮 显 示 ， 在 这 里 设置 行 
的 字体 颜色 为 红色 ， 设 置 表格 的 背景 颜色 为 白色 。 下 面 代 码 中 则 是 设置 启动 超 链接 时 的 字体 颜 
色 变 化 ， 详 细 代码 如 下 所 示 : 
<style type="text/css"> 
a:1link{/* 默 认 时 超 链接 颜色 */ 
color:#06482a; 
text-decoration:none 


} 
a:visited/* 访 问 后 的 超 链接 颜色 */ 
{ 
Color:RGB(153,102,153); 
text-decoration:none 
} 
a:hover/* 鼠 标 移 上 去 时 颜色 */ 
{ 
color:#0099Cc; 
text-decoration:underline 
} 
a:active/* 鼠 标 单 击 不 松 时 颜色 */ 
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color:#CC6699; 


text-decoration:underline 


小 
</style> 
在 代码 中 通过 color 属性 ， 


设置 默认 超 链接 颜色 为 #06482a， 当 用 户 将 鼠标 移 到 超 链 接 上 时 
将 颜色 设置 为 #0099CC， 当 单 击 超 链接 时 颜色 为 #CC6699， 最 后 则 是 访问 后 超 链接 颜色 为 
RGB(153,102.153)。 


8.1.4 运行 结果 


接 下 来 是 保存 修改 页 面 ， 在 浏览 器 中 运行 main.html 页 面 ， 最 终 效果 如 图 8-1 所 示 。 


0 

0 
a 
na 
a 


图 8-1 后 台 管理 系统 
8.1.5 实例 分 析 


nr 


在 上 述 实 例 中 ， 通 过 设置 color 属性 来 设置 容器 内 的 字体 颜色 。 同 样 ， 可 以 通过 


background-color 属性 来 设置 背景 颜色 ， 完 成 需要 显示 的 特效 。 这 两 个 属性 值 类 型 是 相同 的 ， 
可 以 使 用 RGB、 十 六 进 制 值 进行 赋值 。 


8.2 个 人 博客 


本 节 将 讲解 页 面 的 背景 


上 月 东 


图 片 设 置 ， 主 要 通过 设置 background-image 属性 
background-attachment 属性 、background-repeat 属性 来 完成 页 面 


来 完成 页 面 背 景 样式 。 下 面 借 助 个 人 博客 
案例 来 完成 背景 图 片 的 应 用 。 
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上 视频 教学 : 光盘 /视频 /8/8.2 个 人 博客 avi 长度: 10 分 名 


8.2.1 基础 知识 一 一 background 属性 


在 没有 使 用 CSS 技术 之 前 ， 要 为 页 面 添加 一 个 背景 图 像 ， 通 常 是 通过 <body> 标 签 的 
background 属性 来 完成 的 。 现 在 ， 已 经 很 少 使 用 这 个 属性 了 ， 它 已 经 被 CSS 技术 所 替代 。 
background 属性 综合 了 以 上 所 有 与 背景 有 关 的 属性 ( 即 以 back-ground- 开 头 的 属性 )， 可 以 
一 次 性 地 设 定 背 景 样式 。 格 式 如 下 : 
background: [background-color] [background-image] [background-repeat] 
[background-attachment] [background-position] 


其 中 的 属性 顺序 可 以 自由 调换 ， 并 且 可 以 有 选择 性 地 设 定 。 如 果 其 中 的 某 个 属性 没有 设 定 
属性 值 ， 那 么 系统 会 自动 地 为 该 属性 添加 默认 值 。 例 如 ， 定 义 背 景 样式 规则 如 下 : 


body 

{ 
background-color:Black; 
background-image:url (bkl1.jpg); 
background-position:center; 
background-repeat:repeat-x; 
background-attachment :fixed 


} 
该 规则 等 价 于 下 面 几 条 规则 : 


body{background:black url (bkl.jpg) center repeat-x fixed} 
body{background:url (bkl .jpg) black repeat-x center fixed} 
body{background:repeat-x black url (bkl.jpg) fixed center} 


8.2.2 ”基础 知识 一 一 background-image 属性 


background-image 属性 用 于 设 定 标记 的 背景 图 片 。 通 常情 况 下 ， 可 以 在 标记 <body> 中 应 用 
该 属性 值 ， 其 效果 是 将 图 片 用 于 整个 主体 网 页 中 。 
@ ” 在 设 定 背景 图 片 时 , 最 好 同时 也 设 定 背景 色 ,这样 当 背景 图 片 因 某 种 原因 无 法 正常 
提示 」 ”显示 时 , 可 以 使 用 背景 色 来 代替 。 当 然 , 如 果 正 常 显示 , 背景 图 片 会 覆盖 背景 色 的 。 
例如 ， 在 CSS 的 标记 <body> 中 定义 添加 背景 图 片 ， 这 样 每 个 页 面 都 会 显示 该 图 片 ， 详 细 
代码 如 下 所 示 : 
<body style="background-image:url (bk2.jpg); background-color:AliceBlue"> 
<p style="padding:5mm; color:Sienna"> 
郑州 汇 智 计算 机 技术 服务 有 限 公司 成 立 于 2002 年 。 致 力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 


实践 普及 到 客户 的 管理 与 业务 创新 活动 中 ， 全 面 提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 
较 早 的 管理 软件 、 客 户 关系 管理 软件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 提供 商 


< 
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</p> 
</body> 
代码 中 需要 说 明 的 是 背景 图 片 引用 的 问题 ， 在 url 中 指定 引用 背景 图 片 的 路 径 。 该 路 径 可 
以 是 图 片 的 相对 路 径 ， 也 可 以 是 绝对 路 径 ; 还 可 以 使 用 链接 的 方式 链接 到 网 络 中 图 片 的 位 置 。 
运行 页 面 ， 可 以 在 浏览 器 中 查看 背景 图 片 的 显示 效果 。 
， 背景 图 片 的 显示 与 其 尺寸 有 关 ， 如 果 图 片 尺寸 小 于 浏览 器 可 显示 的 范围 ， 那 么 图 
旦 示 | 。 片 显示 的 空余 部 分 将 以 空白 或 重复 图 片 来 填充 、 
背景 图 片 适用 于 任何 页 面 元 素 ， 例 如 ， 为 了 突出 显示 某 一 个 段落 ， 在 上 述 代 码 的 段落 中 应 
用 背景 图 片 ， 详 细 代码 如 下 所 示 : 
<body style="background-image:url (bk2.jpg); background-color:AliceBlue"> 
<p style="padding:5mm; color:Sienna; background-image:url(1.jpg)"> 
郑州 汇 智 计算 机 技术 服务 有 限 公司 成 立 于 2002 年 。 致 力 于 把 基于 先进 信息 技术 的 最 佳 管理 与 业务 实践 
普及 到 客户 的 管理 与 业务 创新 活动 中 ， 全 面 提供 企业 管理 ERP 软件 、 服 务 与 解决 方案 ， 是 中 原 地 区 较 早 
的 管理 软件 、 客 户 关系 管理 软件 、 小 型 企业 管理 软件 以 及 网 站 建设 服务 提供 商 


</p> 
</body> 


上 述 代码 中 引用 的 是 相同 路 径 下 的 名 为 1jpg 的 图 片 ， 在 浏览 器 中 运行 页 面 查看 效果 。 


8.2.3 ”基础 知识 一 一 background-attachment 属性 


在 一 个 页 面 中 ， 如 果 使 用 的 背景 图 片 不 能 够 覆盖 整个 页 面 ， 而 只 是 将 背景 图 片 放置 在 局 
部 位 置 ， 那 么 在 浏览 页 面 时 ， 肯 定 会 出 现 看 不 到 背景 图 片 的 情况 ， 再 者 ， 还 可 能 出 现 背 景 图 片 
初始 可 见 ， 而 随 着 页 面 的 滚动 又 不 可 见 。 也 就 是 说 ， 背 景 图 片 不 能 时 刻 地 随 着 页 面 的 滚动 而 
显示 。 

要 解决 上 述 问 题 ， 就 要 使 用 background-attachment 属性 ， 该 属性 用 来 设 定 背景 图 片 是 否 随 
文档 一 起 滚动 。 该 属性 包含 两 个 属性 值 : scroll 和 fixed， 并 适用 于 所 有 元 素 。 

@ scroll: 默认 值 ， 当 页 面 滚 动 时 ， 背 景 图 片 随 页 面 一 起 滚动 。 

@ fixed: 背景 图 片 固定 在 页 面 的 可 见 区 域 里 。 

使 用 background-attachment 属性 ， 可 以 使 背景 图 片 始终 处 于 视野 范围 内 ， 以 避免 出 现 因 页 


面 的 滚动 而 消失 的 情况 。 
下 面 两 段 代 码 是 两 种 不 同 的 图 片 显示 滚动 条 的 状态 ， 详 细 代 码 如 下 所 示 : 
body{ 


background-image:url (my.jpg); 
background-repeat:no-repeat; 
background-attachment:scroll 


上 述 代 码 中 通过 设置 background-attachment 属性 值 为 scroll 让 页 面 滚动 时 ， 背 景 图 片 始终 
一 起 滚动 。 下 面 代码 则 是 固定 背景 图 片 代 码 。 
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body{ 
background-image:url (my.jpg); 
background-repeat:no-repeat; 
background-attachment:fixed 

} 


在 代码 中 ， 一般 来 说 ,， 属 性 值 为 fxed 其 实 是 相对 于 可 视 范围 而 言 的 。 无 论 页 面 如 何 滚动 ， 
图 片 始终 处 于 可 视 范围 之 内 ， 而 页 面 中 的 元 素 内 容 则 处 于 滚动 状态 。 
@ ， 最 后 需要 说 明 的 是 ，boackground-attachment:fixed 在 CSS 样式 中 是 很 常见 的 。 但 
各 示 | 。 IE 系列 浏览 器 对 其 的 支持 是 有 限 的 。IE 7 对 其 提供 了 正确 的 支持 ， 但 早期 版 本 都 
不 能 支持 。 尽 管 可 以 使 用 JavaScript 中 的 workaround 来 解决 这 个 问题 ， 但 它们 带 
来 的 麻烦 比 其 实现 的 价值 更 大 一 些 。 


8.2.4 基础 知识 一 一 background-repeat 属性 


background-repeat 属性 用 于 设 定 背景 图 片 是 否 重复 平 铺 。 该 属性 有 4 种 属性 值 : repeat、 
repeat-x、repeat-y 和 no-repeat， 默 认 值 为 repeat。 
@ repeat: 背景 图 片 水 平和 垂直 方向 都 重复 平 铺 。 
@ repeat-x: 背景 图 片 水 平方 向 重复 平 铺 。 
@ repeat-y: 背景 图 片 垂直 方向 重复 平 铺 。 
@ no-repeat: 背景 图 片 不 重复 平 铺 。 
background-repeat 属性 设置 的 重复 背景 图 片 是 从 元 素 的 左上 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 
或 全 部 页 面 都 被 背景 图 片 覆 盖 。 
下 面 代码 则 是 实现 水 平和 垂直 方向 平 铺 效果 的 代码 ， 如 下 所 示 : 
body { 
background-image:url (my.jpg); 
background-repeat:repeat 
} 
在 上 述 代码 中 ，my.jpg 是 需要 设置 为 背景 的 图 片 。 利 用 background-repeat 属性 设置 平 铺 效 
果 ， 接 下 来 则 是 让 图 片 平 铺 于 页 面 的 左边 ， 即 垂直 平 铺 ， 代 码 如 下 所 示 : 
body { 
background-image:url (my.jpg); 
background-repeat:repeat-y 


同样 ， 如 果 需 要 图 片 按 水 平方 向 平 铺 ， 则 可 以 使 用 下 列 代码 : 


body { 
background-image:url (my.jpg); 
background-repeat:repeat-x 


} 
当然 ， 如 果 背 景 图 片 符合 页 面 需 要 ， 也 可 以 选择 不 应 用 任何 平 铺 方式 : 


< 人 Oo—— 
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body { 
background-image:url (my.jpg); 
background-repeat:no-repeat 


} 
在 上 面 的 4 个 样式 中 ， 为 了 显示 各 属性 值 的 效果 ， 没 有 应 用 背景 颜色 。 但 是 ， 在 实际 应 用 
中 ， 在 应 用 背景 图 片 的 同时 ， 一 定 要 定义 背景 颜色 。 


8.2.5 ”实例 描述 


下 面 将 通过 个 人 博客 的 实例 讲解 如 何 设置 个 人 博客 背景 图 片 、 显 示 博 客 导航 和 博客 文章 内 
容 ， 以 及 当 文 章 内 容 过 多 出 现 滚动 条 时 背景 图 片 和 滚动 条 是 否 跟随 一 起 滚动 等 功能 。 在 本 实例 
中 主要 通过 使 用 background-image 属性 、background-attachment 属性 和 background-repeat 属性 
来 完 


8.2.6 ”实例 应 用 


【 例 8-2】 个 人 博客 
首先 需要 设置 导航 和 显示 文章 内 容 的 布局 信息 ， 详 细 代 码 如 下 所 示 。 


<table width="588" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="39">gnbsp;</td> 
<td width="487">gnbsp;</td> 
<td width="34"><a href="#"> 注 册 </a></td> 
<td width="28"><a href="#"> 登 录 </a></td> 
二 大 
</table> 
<br/> 
<table width="544" height="34" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="111"” height="34" class="tdimag"> 首 页 </td> 
<td width="111" class="tdimag" style="color:#999"> 文 章 </td> 
<td width="111"” class="tdimag"> 相 册 </td> 
<td width="111"class="tdimag"> 留 言 </td> 
<td width="100" class="tdimag"> 关 于 </td> 
E> 
</table> 
<hr/> 
<br/> 
<div style="font-size:14px; text-align: center;font-weight: bold"> 
</div> 


上 述 代码 中 ， 定 义 了 【注册 】 和 【登录 】 两 个 超 链接 。 接 下 来 要 对 页 面 添加 背景 图 片 以 
及 设置 td 的 背景 图 片 使 它 具 有 导航 功能 ， 详 细 代码 如 下 所 示 : 
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background-image:url (images/http imgload13.jpg); 
background-repeat:no-repeat; 
background-attachment:fixed; 

font-size:12px; 

1 

-tdimag{ 


<style type="text/css"> 
body{ 


background-image:url (images/bqqh2.jpg); 
background-repeat :no-repeat; 
text-align: center; 
1 
a:link { 
color: #CFF; 
} 
</style> 


上 述 代码 通过 设置 body 元 素 的 background-image 属性 来 设置 页 面 的 背景 图 片 ， 使 用 
background-repeat 属性 来 控制 图 片 的 重复 方式 ， 设 置 background-attachment 属性 值 为 fixed 使 
出 现 滚动 条 时 背景 图 片 不 随 滚动 条 一 起 滚动 。 

8.2.7 ”运行 结果 


保存 修改 页 面 运行 index.html 页 面 ， 运 行 结果 如 图 8-2 所 示 。 


图 8-2 个 人 博客 


8.2.8 实例 分 析 


sm. 


设置 页 面 背景 图 片 只 需要 设置 background-image 属性 ， 通 过 设置 background-repeat 属性 ， 
可 以 控制 页 面 背景 图 像 的 平 销 方式 ，repeat 则 是 图 片 水 平和 垂直 方向 都 重复 平 铺 ; 而 设置 
background-attachment 属性 则 是 控制 背景 图 片 和 滚动 条 是 否 一 起 滚动 。 


<@—— 
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8.3 设置 网 站 Logo 位 置 


随 着 技术 的 不 断 更 新 ， 人 们 的 需求 也 在 不 断 地 增加 。 有 的 时 候 在 开发 项 目 中 可 能 会 遇 到 这 
样 的 问题 : 要 求 在 页 面 内 显示 一 张 背景 图 片 ， 而 却 要 求 背景 图 片 的 位 置 固 定 到 某 一 个 地 方 。 为 
了 方便 开发 者 的 使 用 ，CSS 提供 了 很 多 关于 设置 背景 图 片 位 置 的 属性 ， 接 下 来 将 对 
background-position 属性 、 background-position-y 属性 、 background-position-x 属性 、 
layer-background-color 属性 和 layer-background-image 属性 进行 详细 讲解 。 


上 视频 教学 : 光盘 /视频 /8/8.3 ”设置 网 站 logo 位 置 (1) 和 8.3 设置 网 站 logo 位 置 (2).avi 
长度 : 8 分 名 


8.3.1 基础 知识 一 一 background-position 属性 


background-position 属性 用 于 指定 背景 图 片 在 页 面 中 所 处 的 位 置 。 该 属性 的 属性 值 可 以 分 
为 4 类 : 绝对 定义 位 置 (lengthb)、 百 分 比 定义 位 置 (percentage)、 垂 直 对 齐 值 和 水 平 对 齐 值 。 其 中 
垂直 对 齐 值 包括 top、center 和 bottom， 水 平 对 齐 值 包括 left、center 和 right。 
length: 设置 图 片 与 边 距 水 平 、 垂 直方 向 的 距离 ， 长 度 单位 为 cm、mm、px 等 。 
percentage: 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 。 
top: 背景 图 片 项 部 显示 。 
center: 背景 图 片 居 中 显示 。 
bottom: 背景 图 片 底部 显示 。 
left: 背景 图 片 左 部 居中 显示 。 
right: 背景 图 片 右 部 居中 显示 。 


》$》 由 于 background-position 属性 是 描述 背景 图 片 的 位 置 的 ， 所 以 必须 与 
a| background-image 属性 同时 使 用 。 


另外 ， 垂 直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 冬 直 位 置 和 水 平 位 置 ， 
例如 下 列 样式 代码 : 


body { 
background-image:url (jt.gif); 
background-repeat:no-repeat; 
background-position:top right 


【 eeee@e eg@ e@ 


问 
引 


} 

上 述 代码 设置 图 片 位 置 为 上 端 靠 右 ， 通 过 设置 background-position 属性 值 为 top right 即 可 

使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 放置 图 片 ， 如 果 在 页 面 中 要 自由 定义 图 片 的 位 
置 ， 则 需要 使 用 确定 数值 或 百分比 ， 详 细 代码 如 下 所 示 : 
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body { 
background-image:url (3.jpg); 
background-repeat:no-repeat; 
background-position:20% 20% 

1 

body { 
background-image:url(3.jpg); 
background-repeat :no-repeat; 
background-position:20px 30px 

} 


第 一 条 规则 表示 图 片 的 垂直 位 置 与 水 平 位 置 均 相 对 于 页 面 的 20% 放 置 , 所 以 页 面 的 大 小 决 
定 了 图 片 所 处 的 位 置 ， 第 二 条 规则 表示 图 片 的 水 平 距离 为 20px， 垂 直 距 离 为 30px， 该 规则 定 
义 了 图 片 的 绝对 位 置 。 在 浏览 器 的 <body> 标 记 中 可 以 分 别 使 用 两 条 规则 。 
@> background-position 属性 适用 于 XHTML 中 的 块 标记 及 可 替换 标记 ， 比 如 img、 
提示 input、select 等 。 


8.3.2 ”基础 知识 一 一 background-position-x 属性 


background-position-x 属性 用 于 设置 或 检索 对 象 的 背景 图 像 横 坐标 位 置 ， 必 须 先 指定 
background-image 属性 ， 默 认 值 为 0%。 该 属性 不 受 对 象 的 补丁 属性 (padding) 的 影响 ， 它 有 4 
个 参数 值 。 

@ length: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 


@ left: 居 左 。 
@ center: 居中 。 
@ right: 居 右 。 


下 面 通过 一 段 代码 来 介绍 如 何 使 用 background-position-x 属性 来 完成 图 片 坐标 的 更 改 ， 详 
细 代 码 如 下 所 示 : 


<style type="text/css"> 


Pi 
background-Position-x:35% 
background-repeat:no-repeat; 
height:80px 

} 

</style> 


上 述 代 码 设置 图 片 在 当前 容器 中 的 x 坐标 的 百分比 ， 从 而 控制 图 片 在 页 面 中 显示 的 位 置 。 


8.3.3 ”基础 知识 一 一 background-position-y 属性 


background-position-y 属性 用 于 设置 或 检索 对 象 的 背景 图 像 纵 坐标 位 置 。 该 属性 和 
background-position-x 属性 使 用 方法 类 似 ， 唯 一 不 同 的 就 是 它 的 显示 方式 不 同 ， 
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background-position-y 属性 也 有 4 个 参数 。 
e@ length: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 
[2 top: 居 顶 。 
®@ center: 居中 。 
@ bottom: 居 底 。 
background-position-y 属性 是 用 来 控制 图 片 居于 项 部 、 中 部 或 底部 的 位 置 ， 同 样 还 可 以 通 
过 设置 百分比 来 控制 图 片 的 位 置 ， 详 细 代码 如 下 所 示 : 
<style type="text/css"> 
p{ 
background-image: url("images/~~Logo.gif"); 
background-position-y:bottom; 
background-repeat:no-repeat; 
height:80px 
1 
</style> 
上 述 代 码 中 ， 同 样 设置 background-image 属性 指定 一 张 图 片 ， 在 这 里 设置 
background-position-y 的 值 为 bottom， 则 是 为 了 使 图 片 能 够 显示 在 最 底部 。 


8.3.4 基础 知识 一 一 layer-background-color 属性 


layer-background-color 属性 用 来 设置 或 检索 对 象 整个 区 域 的 背景 颜色 , 该 属性 有 两 个 参数 值 。 
@ transparent: 背景 色 为 透明 。 

@ color: 为 背景 指定 颜色 。 

下 面 这 段 代码 则 是 如 何 使 用 该 属性 的 基本 语法 规则 : 

<style type="text/css"> 

div { 

layer-background-color: transparent; 


} 
</style > 


上 述 代 码 是 对 layer-background-color 属性 进行 赋值 ， 让 div 元 素 的 背景 色 为 透明 。 


8.3.5 ”基础 知识 一 一 layer-background-image 属性 


layer-background-image 属性 用 来 设置 或 检索 对 象 整个 区 域 的 背景 图 像 ， 该 属性 有 两 个 参 
数值 。 

@ none: 无 背景 图 。 

@ url: 使 用 绝对 或 相对 地 址 指定 背景 图 像 。 

下 面 实例 是 对 layer-background-image 属性 使 用 方法 的 具体 讲解 ， 详 细 代码 如 下 所 示 : 
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<style type="text/css"> 

code { 

position: absolute; 

top: 100px; 

left: 300px; 

width: 200px; 

border: thin solid black; 
background-image: urll("comet.jpg"); 
layer-background-image: url("bb comet.jpg"); 
} 

</style > 


8.3.6 ”实例 描述 


在 互联 网 领域 中 ， 无论 网 站 的 规模 是 大 还 是 小 ， 是 知名 度 高 的 还 是 默默 无 闻 的 ， 它 们 通常 
都 具有 一 个 共同 的 特点 ， 就 是 每 个 网 站 都 有 自己 独特 的 网 站 Logo， 它 代表 网 站 的 形象 ， 几 乎 
所 有 的 网 站 Logo 都 位 于 页 面 的 左上 角 。 下 面 通过 设置 网 站 Logo 位 置 的 案例 来 进行 讲解 。 


8.3.7 ”实例 应 用 


【 例 8-3】 设 置 网 站 Logo 位 置 
首先 需要 设置 页 面 内 容 ， 将 Logo 作为 页 面 的 背景 图 片 显示 在 页 面 内 ， 通 过 设置 相关 的 属 
性 使 背景 图 片 显示 在 相应 的 位 置 ， 详 细 代码 如 下 所 示 : 


body { 
background-image:url (Logo.jpg); 


background-repeat:no-repeat; 
layer-background-color: transparent; 
background-position:3% 8% 
} 
在 上 述 代码 中 ， 首 先 指定 了 background-image 为 网 站 Logo。 然 后 以 背景 图 片 的 形式 显示 
在 页 面 中 。 接 着 则 是 设置 背景 图 片 不 发 生 改变 ， 图 片 不 重复 平 铺 。 这 样 就 可 以 将 一 个 完整 的 图 
片 显示 出 来 。 接 下 来 需要 将 layer-background-color 的 属性 值 设置 为 transparent， 使 其 背景 色 显 
示 为 透明 的 效果 。background-position 属性 是 设置 背景 图 片 位 置 比较 重要 的 属性 ， 该 属性 既 可 
使 用 数字 表示 也 可 使 用 百分数 ， 可 以 根据 具体 情况 灵活 运用 。 


8.3.8 ”运行 结果 


保存 修改 后 的 页 面 代码 ， 在 浏览 器 中 运行 indexa.html 页 面 的 结果 如 图 8-3 所 示 。 


性 旧 


< 


人 SS web 和 学 习 录 沁 


个 人 中 全 面 R 陀 坛 


《电影 风暴 》 达 于 | 司 


西村 天 工 ; ZBrush 


图 8-3 网 站 Logo 


8.3.9 实例 分 析 


ee 


通过 上 述 实例 的 讲解 ， 在 使 用 background-position 属性 时 ， 可 以 根据 其 属性 值 的 不 同 来 改 
变 背 景 图 片 在 页 面 中 显示 的 位 置 ， 该 属性 有 顶部 居中 显示 、 居 中 显示 、 底 部 居中 显示 、 左 部 居 
中 显示 和 右 部 居中 显示 等 选项 ， 如 果 这 些 显示 位 置 还 不 能 够 满足 需求 ， 还 可 以 选择 使 用 
percentage 的 属性 值 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 来 放置 图 片 。 


8.4.1 背景 图 片 重复 显示 


设置 背景 图 片 为 什么 会 重复 显示 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-11775-1-1.html 

在 使 用 background-image 属性 设置 页 面 背景 图 片 时 ， 发 现 图 片 是 重复 显示 出 来 的 ， 代 码 如 
下 所 示 : 


pt{ 


background-image: url("images/~~Logo.gif"); 
background-positionY:center; 
height:80px 
| 
在 上 述 代 码 中 ， 设 置 background-image 属性 的 url 值 为 图 片 路 径 ， 当 在 浏览 器 中 运行 这 些 
代码 时 就 出 现 问题 了 。 
【解决 办 法 】 背 景 图 片 的 显示 与 其 尺 十 有关， 如 果 图 片 尺 寸 小 于 浏览 器 可 显示 的 范围 ， 那 
么 图 片 显 示 的 空余 的 部 分 将 以 空白 或 重复 图 片 来 填充 , 可 以 设置 background-repeat 属性 来 控制 
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显示 图 片 的 样式 。 
8.4.2 ”背景 滚动 问题 


使 用 background-attachment 属性 没有 效果 ! 
网 络 课堂 : http://bbs.itzcn.com/thread-11776-1-1.html 

在 制作 个 人 博客 的 时 候 ， 需 要 内 容 和 背景 图 片 不 一 起 滚动 ， 因 此 我 就 将 
background-attachment 属性 的 值 设置 为 fxed， 然 后 使 用 正 浏览 器 打开 时 内 容 和 背景 图 片 却 还 
是 一 起 滚动 ， 请 问 这 是 什么 原因 ? 

【解决 办 法 】boackground-attachment:fixed 在 CSS 样式 是 很 常见 的 , 但 正 系列 浏览 器 对 它 
的 支持 是 有 限 的 。 焉 7 对 其 提供 了 正确 的 支持 ， 但 早期 的 版 本 都 不 能 支持 。 尽 管 可 以 使 用 
JavaScript 中 的 workaround 技术 来 解决 这 个 问题 ,但 它们 带 来 的 麻烦 比 其 实现 的 价值 更 大 一 些 。 


8.5 习 题 


1. 填空 题 


(1) CSS 中 为 开发 人 员 预 设 了 种 颜色 。 

(2) 在 CSS 中 颜色 值 可 以 分 为 十 六 进 制 值 、 颜 色 简称 和 志 种 : 

(3) 属性 用 来 设置 或 检索 对 象 的 背景 颜色 。 

(4) 通常 情况 下 ， 可 以 使 用 CSS 中 的 属性 来 设置 页 面 的 背景 图 片 。 

(5) background-repeat 属性 用 于 设 定 背景 图 片 是 否 重 复 平 铺 , 该 属性 中 的 值 用 
来 设置 背景 图 片 不 重复 平 铺 。 

(6) 由 于 background-position 属性 是 描述 背景 图 片 的 位 置 的 ， 所 以 必须 与 属性 
同时 使 用 。 

(7) background-position-x 属性 用 来 设置 或 检索 对 象 的 背景 图 像 的 横 坐 标 位 置 ， 该 属性 中 
center 值 的 作用 是 


" 


2. 选择 题 
(1) 下 列 选项 中 属于 background-attachment 属性 的 值 的 是 
A. none B. color C. fixed D. center 


(2) 下 列 选项 都 是 background-position 属性 值 的 一 些 特性 , 其 中 是 bottom 属性 值 的 作用 是 


A. 背景 图 片 居中 显示 B. 背景 图 片 右 部 居中 显示 
C. 背景 图 片 项 部 居中 显示 D.， 背景 图 片 底部 居中 显示 

(3) layer-background-color 属性 中 的 属性 值 用 来 设置 背景 色 透 明 。 
A.tsransparent B. url C. none D. color 


(4) background-position 属性 用 于 指定 背景 图 片 在 页 面 中 所 处 的 位 置 ， 该 属性 的 属性 值 可 
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以 分 为 4 类 ， 下 面 不 属于 该 属性 的 值 的 是 


A. 十 六 进 制 值 B. 百分比 定义 位 置 
C. 垂直 对 齐 值 D. 水 平 对 齐 值 
3. 上 机 练习 


上 机 练习 : 窗 内 网 首页 设计 
实例 要 求 : 在 页 面 的 左上 角 添 加 网 站 Logo， 同 时 设置 登录 窗口 的 字体 颜色 和 背景 颜色 ， 


当 出 现 滚动 条 时 页 面 内 容 和 背景 图 片 不 同时 滚动 。 页 面 背景 图 片 水 平和 垂直 方向 都 重复 平 销 。 
运行 结果 如 图 8-4 所 示 。 
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图 8-4 窗 内 网 首页 面 


第 9 章 列表 属性 


内 容 摘要 : 

列表 是 XHTML 中 一 种 很 有 用 的 显示 方式 , 它 可 以 把 相关 的 具有 并 列 关系 的 内 容 整齐 地 垂 
直 排 列 ， 不 仅 很 好 地 归纳 了 内 容 ， 而 且 使 页 面 也 显得 整洁 ， 增 强 了 页 面 的 条 理性 。 而 在 CSS 
中 为 控制 列表 提供 了 符号 列表 、 图 像 列表 和 位 置 列表 三 种 样式 。 本 章 将 对 这 三 种 样式 以 及 包含 
这 三 种 样式 的 集合 样式 属性 进行 详细 介绍 。 

学 习 目标 : 

@ 掌握 使 用 list-style 属性 的 方法 
掌握 使 用 list-style-image 属性 的 方法 
掌握 使 用 list-style-position 属性 的 方法 
掌握 使 用 list-style-type 属性 的 方法 
掌握 使 用 marker-offset 属性 的 方法 


9.1 构建 试卷 页 面 


在 Web 开发 中 ， 很 多 情况 下 需要 给 列表 项 定义 项 目 符号 。 在 CSS 中 为 列表 项 定义 项 目 符 
号 , 可 以 使 用 list-style-type 属性 。 本 节 将 为 大 家 讲述 CSS 中 的 符号 列表 属性 一 一 list-style-type。 


上 视频 教学 : 光盘 /视频 /9/9.1 构建 试卷 页 面 .avi @ 度 : 5 分 名 


9.1.1 基础 知识 一 一 list-style-type 属性 


在 CSS 中 可 以 使 用 list-style-type 属性 为 列表 项 定义 项 目 符号 。 该 属性 值 说 明 如 表 9-1 所 示 。 
表 9-1 list-style-type 属性 值 


属性 值 说 明 说 明 
i 实心 贺 形 项 目 符号 空心 贺 形 项 目 符号 


y 十 进 制 数 项 目 符号 , 不足 两 位 的 
decimal 十 进 制 数 项 目 符号 , 如 : 1、2、3... | decimal-leading-zero 补 齐 前 导 0, 例如; 01、 02、 03.、 
小 写 罗马 文字 项 目 符号 ， 如 : i、 i 大 写 罗马 文字 项 目 符号 ， 如 : 工 
lower-roman | 7 upper-roman 
i iii... I I... 
、 目 » 
lower-greek se 实心 方形 项 目 符号 
a(alpha)、B(beta)、Y (gamma)... 
| 小写 拉丁 文 项 目 符号 ， 如 a、b、 大 写 拉丁 文 项 目 符号 , 如 A、B、 
lower-latin Upper-latin 三 
人 吕 
an、 gan... 


小 写 拉丁 文 项 目 符号 ， 如 a、b、 大 写 拉丁 文 项 目 符号 , 如 A、B、 
lower-alpha Upper-alpha a 


Ei: 
none 无 项 目 符号 继承 


list-style-type 属性 只 能 够 用 于 XHTML 中 的 列表 元 素 ， 比 如 ，ul、ol 等 。 而 且 列表 项 元 素 
li 能 够 单独 定义 列表 符号 ， 例 如 : 


<body> 

<h1> 图 书 销量 排行 榜 </h1> 

<ol> 
<li style="list-style-type:disc">《 世 界 博物 馆 巡 礼 系列 》</1i> 
<li style="list-style-type:circle">《 老 照片 )》 </1i> 
<li style="list-style-type:square">《 中 华 传统 文化 经 典 文 库 》</1i> 
<li style="list-style-type:decimal">《 鼠 疫 》</1i> 
<li style="list-style-type:upper-alpha">《 我 把 青春 献 给 您 》</1i> 
<li style="list-style-type:lower-alpha">《 经 济 学 家 茶座 》</1i> 
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<li style="list-style-type:upper-roman"> 《红楼 小 讲 大 家 小 书 》</1i> 
<li style="list-style-type:lower-roman">《 哈 耶 克 传 》</1i> 
<li style="list-style-type:none">《 大 地 玫瑰 包 系 列 》</1i> 
</o1> 
</body> 


在 正 浏 览 器 中 运行 页 面 ,效果 如 图 9-1 所 示 。 
从 上 面 的 一 个 案例 中 ， 可 以 看 出 CSS 不 区 分 无 序 与 有 序列 表 项 ， 所 以 即使 是 有 序列 表 项 
也 可 以 使 用 前 三 种 属性 值 定 义 项 目 符号 。 如 下 面 代 码 定义 : 
<body> 
<h1> 图 书 销量 排行 榜 </h1> 
<ol style="list-style-type:square;"> 
<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<1i>《 老 照片 》</1i> 
<1i>《 中 华 传统 文化 经 典 文库 》</1i> 
</o1> 
</body> 


在 正 浏 览 器 中 查看 一 下 ， 效 果 如 图 9-2 所 示 。 
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图 9-1 列表 项 图 9-2 有 序列 表 项 


如 果 同时 在 ol 标签 中 和 上 标签 中 定义 了 不 同 的 项 目 符号 样式 , 那么 li 所 表示 的 列 
表 项 将 按 其 定义 样式 显示 项 目 符号 ,其 余 的 列表 项 将 按 ol 标签 中 定义 的 样式 显 
示 项 目 符号 。 

list-style-type 属性 的 默认 值 是 disc, 因此 在 没有 特殊 声明 的 情况 下 , 所 有 列表 (无 序 或 有 序 ) 
都 将 使 用 实心 圆 形 作为 列表 项 的 项 目 符号 。 

如 果 在 某 个 列表 项 前 (i 元素 ) 不 需要 项 目 符号 ， 则 可 以 设 定 属性 值 为 none。 但 是 这 并 不 影 
响 上 级 元 素 (ol 标记 ) 设 定 的 有 序 项 目 符号 的 排列 。 代 码 如 下 所 示 : 

<body> 
<h1> 图 书 销量 排行 榜 </h1> 


<ol style="list-~style-type:decimal;"> 
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<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<1i>《 老 照片 》</1i> 
<1i>《 中 华 传统 文化 经 典 文库 》</1i> 
<li style="list-style-type:none">《 大 地 玫瑰 包 系 列 》</1i> 
<1i>《 鼠 疫 》</1i> 
<1i>《 我 把 青春 献 给 您 》</1i> 
<1i style="list-style-type:none"> 《经 济 学 家 茶座 》</1i> 
<1i>《 红 楼 小 讲 一 一 大 家 小 书 》</1i> 
<1i>《 哈 耶 克 传 》</1i> 
</o1> 
</body> 


在 正 浏 览 器 中 查看 页 面 ， 效 果 如 图 9-3 所 示 。 


图 9-3 自动 排列 计数 


@) list-style-type 属性 是 可 以 继承 的 ， 如 果 想 要 定义 新 的 符号 列表 ， 则 需要 单独 定义 。 


9.1.2 ”实例 描述 


定义 符号 列表 的 样式 种 类 很 多 ， 而 每 种 样式 都 有 它 的 用 处 。 比 如 说 页 面 中 要 罗列 出 一 些 题 
目 ， 需 要 用 到 十 进 制 数 项 目 符号 ; 页 面 中 需要 显示 每 道 题 的 选择 答案 ， 需 要 用 到 大 写字 母 项 目 
符号 或 者 小 写字 母 项 目 符号 …… 而 同一 张 页 面 中 也 许 需 要 出 现 很 多 的 列表 , 那么 怎样 合理 地 使 
用 符号 列表 属性 呢 ? 下 面 ， 我 们 就 来 尝试 一 下 吧 ! 


9.1.3 ”实例 应 用 


【 例 9-1】 构 建 试卷 页 画 


{>> 


(1) 新 建 一 个 HTML 页 面 ， 命 名 为 9-1.html。 
(2) 在 页 面 中 定义 柑 套 列表 ， 代 码 如 下 所 示 : 


<ul> 
<1i>CSsS 是 利用 什么 XHTML 标记 构建 网 页 布局 ? ()</1i> 
<ul id="upperalpha"> 
<1i>dir</1i> 
<1li>div</1i> 
<li>dis</1i> 
<1li>dif</1i> 
</ul> 
<1i> 在 css 语言 中 下 列 哪 一 项 是 “左边 框 ”的 语法 ? () </1i> 
<ul id="upperalpha"> 
<1li>border-left-width</1i> 
<li>border-top-width</1i> 
<1li>border-left</1i> 
<1Li>border-top-width</1i> 
</ul> 
<1i> 在 css 语言 中 下 列 哪 一 项 的 适用 对 象 是 “所 有 对 象 ”? () </1i> 
<ul id="upperalpha"> 
<1i> 背 景 附件 </1i> 
<1i> 文 本 排列 </1i> 
<1i> 纵 向 排列 </1i> 
<1i> 文 本 缩 进 </1i> 
</ul> 
<1i> 下 列 选项 中 不 属于 css 文本 属性 的 是 () 。</1i> 


<ul id="upperalpha"> 


<li>font-size</1i> 
<li>text-transform</1i> 
<li>text-align</1i> 
<1li>line-height</1i> 
</ul> 
<1i> 在 css 中 不 属于 添加 在 当前 页 面 的 形式 是 () 。</1i> 
<ul id="upperalpha"> 
<1i> 内 幅 式 样式 表 </1i> 
<1i> 嵌 入 式样 式 表 </1i> 
<1i> 层 迭 式 样式 表 </1i> 
<1i> 链 接 式 样式 表 </1i> 
</ul> 
</ul> 


(3) 定义 上 面 的 嵌 套 列表 样式 表 ， 代 码 如 下 : 


ul 

{ 
font-size:18px; 
font-weight:bold; 
list-style-type:decimal; 


<@— 


1 

ul #upperalpha 

{ 
font-size:16px; 
font-weight:normal; 
list-style-type:upper-alpha; 

} 


(4) 保存 9-1.html 页 面 。 


9.1.4 运行 结果 


在 正 浏 览 器 中 运行 9-1.html 页 面 ， 出 现 如 图 9-4 所 示 的 页 面 效果 。 
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图 9-4 使 用 list-style-type 属性 构建 试卷 页 面 


9.1.5 “实例 分 析 


点 源码 解析 : 


在 上 面 的 实例 中 ,定义 列表 的 list-style-type 属性 默认 值 为 decimal( 十 进 制 数 项 目 符号 )， 并 
在 其 每 个 列表 项 下 面 谋 套 无 序列 表 (ul)。 定 义 谋 套 列表 的 list-style-type 值 为 upper-alpha( 大 写字 
母 项 目 符号 )， 从 而 在 页 面 中 显示 出 仿 试 卷 模式 的 页 面 。 


9.2 新闻 中 心 图 像 列表 


为 了 使 页 面 更 加 生动 ， 除 了 使 用 预 置 的 项 目 符号 外 ， 还 可 以 使 用 图 像 作为 项 目 符号 ， 用 来 
标识 各 列表 项 。CSS 中 使 用 list-style-image 属性 来 实现 使 用 图 像 蔡 代 列表 项 的 常规 项 目 符号 。 
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这 节 将 为 大 家 讲述 如 何 使 用 list-style-image 属性 来 定义 列表 项 的 项 目 符号 。 


上 视频 教学 : 光盘 /视频 /9/9.2 ”新闻 中 心 图 像 列表 .avi 长度 : 4 分 名 


9.2.1 基础 知识 一 一 list-style-image 属性 


在 CSS 中， 可 以 使 用 list-style-image 属性 来 实现 图 像 列 表 。 使 用 list-style-image 属性 为 列 
表 项 指定 图 像 很 简单 ， 只 要 在 属性 中 指定 图 像 的 路 径 就 可 以 了 ， 格 式 如 下 : 


list-style-image:url (图像 路 径 ) /none 


list-style-image 属性 可 以 取 两 个 值 。 
@ none: 没有 替换 的 图 片 。 
@ url( 图 像 路 径 ): 要 蔡 换 图 片 的 路 径 。 
例如 ， 下 面 的 代码 指定 了 一 个 图 像 作为 各 列表 项 的 项 目 符号 。 
<body> 
<h1> 图 书 销量 排行 榜 </h1> 
<ol style="list-style-image:url (images/emot-20.gif);"> 
<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<1i>《 老 照片 》</1i> 
<1i>《 中 华 传统 文化 经 典 文库 》</1i> 
</o1> 
</body> 


在 正 浏 览 器 中 运行 页 面 ,效果 如 图 9-5 所 示 。 
0 | “引用 图 像 的 路 径 可 以 使 用 相对 路 径 ， 也 可 使 用 绝对 路 径 ， 或 者 指定 网 络 资源 链接 。 


使 用 图 像 项 目 符号 ， 有 时 会 出 现 图 像 不 能 够 正常 显示 的 情况 ， 在 这 种 情况 下 ， 最 好 的 办 法 
就 是 在 定义 图 像 项 目 符号 的 同时 ， 设 置 符号 列表 。 这 样 能 够 保证 在 图 像 不 能 够 正确 加 载 时 ， 使 
用 其 他 项 目 符号 来 代替 ， 如 下 面 的 代码 : 
<body style="background-image:url (images/http imgload7.jpg);"> 
<h1> 图 书 销量 排行 榜 </h1> 
<ol style="list-style-image:url (images/emot-21.gif); 
list-style-type:circle;"> 
<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<1i>《 老 照片 》</1i> 
<1i>《 中 华 传统 文化 经 典 文库 》</1i> 
</o1> 
</body> 


如 果 上 面 代码 中 的 images 文件 夹 下 不 存在 “emot-21.gif” 图 片 时 ， 在 浏览 器 中 浏览 效果 ， 
如 图 9-6 所 示 ， 显 示 的 是 空心 圆 形 的 项 目 符号 。 


< 


全 开发 学 习 实录 …# 


图 9-5 图 像 项 目 符号 图 9-6 使 用 预 置 项 目 符号 


9.2.2 ”实例 描述 


你 做 过 新 闻 管 理 系统 吗 ? 在 前 台 展 示 中 , 是否 需 要 把 新 闻 展 现在 页 面 中 ， 并 且 需 要 在 每 条 
新 闻 的 前 面 加 上 一 张 标 识 “NEW” 的 图 片 呢 ? 学 习 了 CSS 中 的 图 像 列表 属性 ， 这 些 对 大 家 来 
说 就 是 轻而易举 的 事情 了 ， 并 非 需要 在 页 面 中 编辑 大 量 的 代码 来 完成 这 项 工作 ， 只 需要 一 行 
CSS 代码 就 可 以 了 。 


9.2.3 ”实例 应 用 


【 例 9-2】 新 闻 中 心 图 像 列表 

(1) 新 建 HTML 页 面 ， 命 名 为 9-2.html。 

(2) 在 页 面 中 定义 第 一 个 “ol” 列表， 设置 list-style-image 属性 值 为 一 张 存在 的 图 片 ， 并 设 
置 list-style-type 的 属性 值 ， 代 码 如 下 : 


<h1> 新 闻 中 心 </h1> 
<ol style="list-style-image:url (images/sucaiwcom70930000ir.gif); list-— 
style-type:square;"> 
<1i> 专 家 建议 国 考 公开 计 分 标准 和 答案 ， 以 方便 考生 ……</1i> 
<1i> 好 心 带 讨 饭 者 回 家 ， 没 想到 反 被 他 们 抢 了 </1i> 
<1i> 新 107 国道 15 日 启用 </1i> 
<1i> 郑 州 明年 有 望 用 垃圾 发 电 </1i> 
<1i> 办 离婚 手续 起 争议 </1i> 
<1i> 煤 化 建 业 公司 11 亿 元 拿 地 86 亩 </1i> 
<1i> 杭 州 回应 名 人 入 住 “ 别 坚 保 障 房 ”</1i> 
<1i> 官 员 遭 押 590 天 后 被 判 无 罪 ， 官 复原 职 </1i> 


</o1> 
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(3) 接着 在 9-2.html 页 面 中 定义 第 二 个 “ol” 列表 ,设置 list-style-image 属性 值 为 一 张 实际 
不 存在 的 图 片 ， 并 设置 list-style-type 的 属性 值 ， 代 码 如 下 : 
<h1> 房 产 动态 </h1> 


<ol style="list-style-image:url (images/none.jpg); list-style-type:square;"> 
<1i> 商 业 地 产 抗衡 住宅 地 产 </1i> 
<1i>“ 最 牛 钉 子 户 ” 占 道 七 年 </1i> 
<1i>70 亿 富 婆 身 陷 “ 别 墅 保障 房 ” 风 波 </1i> 
<1i> 中 科 院 “住房 绿 皮 书 ”: ” 疮 房价 泡沫 成 分 50%</1i> 


</o1> 


9.2.4 运行 结果 


在 正 浏 览 器 中 运行 9-2.html 页 面 ， 展 示 新 闻 动 态 。 效 果 如 图 9-7 所 示 。 
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9-7 ”新 闻 中 心 图 像 列表 


9.2.5 ”实例 分 析 


mw. 


在 上 面 的 实例 中 ， 定 义 了 “新 闻 中 心 ” 列 表 (o]) 和 “房产 动态 ”列表 (ol)， 并 定义 了 各 个 列 
表 的 list-style-image 属性 ， 其 中 ，“ 新 闻 动 态 ” 列 表 的 URL 地 址 是 有 效 的 ， 因 此 ， 在 “新 闻 中 
心 ”列表 项 中 显示 出 了 图 像 , 而 非 实心 方形 项 目 符号 .对 于 “房产 动态 ”列表 中 的 list-style-image 
属性 值 的 URL 是 无 效 的 ， 因 此 ， 采 用 list-style-type 属性 值 作为 项 目 符号 来 显示 。 


< 


9.3 “阶梯 形 ” 新 闻 展 示 页 面 


在 页 面 布局 时 ， 有 时 需要 将 项 目 符号 放 入 到 列表 项 内 部 ， 而 有 时 需要 将 项 目 符号 突出 于 列 
表 项 内 容 ， 这 时 就 可 以 使 用 CSS 的 list-style-position 属性 ， 该 属性 可 以 用 来 改变 项 目 符号 与 列 
表 内 容 的 位 置 。 本 节 将 为 大 家 讲述 如 何 使 用 list-style-position 属性 设置 列表 项 的 位 置 。 


上 视频 教学 : 光盘 /视频 /9/93 “阶梯 形 ”新 闻 展示 页 面 avi 人 @@ 长 度 :11 分钟 


9.3.1 基础 知识 一 一 list-style-position 属性 


list-style-position 属性 可 以 设置 在 何 处 放置 列表 项 符号 , 该 属性 用 于 声明 列表 符号 相对 于 列 
表 项 内 容 的 位 置 ， 它 的 有 效 值 如 表 9-2 所 示 。 
表 9-2 list-style-position 属性 值 


属性 值 说 明 
inside 将 项 目 符号 放 入 列表 项 内 部 
outside 将 项 目 符号 突出 于 列表 项 内 容 
inherit 规定 应 该 从 父 元 素 继承 list-style-position 属性 的 值 


list-style-position 属性 的 有 效 值 有 三 个 , 分别 是 inside、outside 和 inherit, 默认 值 为 outside。 
下 面 给 出 一 个 实例 ， 来 说 明 它 的 属性 值 所 表示 的 列表 项 位 置 的 不 同 。 


<h1> 水 果 简 介 </h1> 
<ol style="list-style-type:circle"> 
<li style="list-style-position:inside"> 
吃香 莫 治 忧郁 症 。 过 度 用 脑 导致 人 体内 维生素 、 矿 物质 及 热量 缺乏 ， 除了 大 脑 疲惫 ， 还 常常 感 
到 情绪 低落 。 此 时 补充 香蕉 可 提供 所 需 营养 物质 并 缓解 消极 情绪 。 由 于 过 度 用 脑 消 耗 多 种 维生素 ， 因 此 
营养 师 建议 同时 补充 善 存 等 多 维生素 片 。 
AI 
<1i style="list-style-position:outside"> 
猕猴 桃 治 牙 埠 出血。 牙齿 健康 与 维生素 c 息息相关 。 缺 乏 维生素 c 的 人 牙齿 变 得 脆弱 ， 常 常 
出 血 、 肿 胀 ， 甚 至 引起 牙齿 松动 。 猕 猴 桃 的 维生素 c 含量 是 水 果 中 最 丰富 的 ， 因 此 是 最 有 益 于 牙齿 健康 
的 水 果 。 
< 


</o1> 


在 代码 中 ， 第 一 个 列表 项 样式 定义 将 项 目 符号 放 入 列表 项 内 部 ， 而 第 二 个 列表 项 样式 定义 
将 项 目 符号 突出 于 列表 项 内 容 。 在 正 浏览 器 中 运行 页 面 ， 查 看 效果 如 图 9-8 所 示 。 
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太守 列表 - Windovs Intornot Eaplorer 


ED | 大 EyDocment\css\ 定 代码 W993. htal 


寅 安 | 大 人 rE 


部 症 。 过 度 用 脑 导 致 人 体内 维生素 、 矿 物质 及 热量 缺乏 ， 除 了 - 
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9-8 ”列表 项 位 置 


9.3.2 ”实例 描述 


新 闻 展 示 页 面 的 排版 “千姿百态 ”， 甚 至 可 以 是 “阶梯 形 ” 的 ， 每 个 栏目 下 的 新 闻 都 要 比 
一 个 栏目 的 新 闻 项 多 出 几 个 字符 的 位 置 。 像 这 样 的 排版 ， 完 全 可 以 使 用 list-style-position 


属性 来 完成 ， 下 面 就 来 做 一 个 “阶梯 形 ” 的 新 闻 展 示 页 面 吧 ! 


9.3.3 ”实例 应 用 


【 例 9-3】 制 作 “ 阶 梯形 ”新 闻 展 示 页 面 
(1) 新 建 HIML 页 面 ， 命 名 为 9-3.html。 


(2) 在 页 面 中 定义 新 闻 中 心 的 “ul” 列 表 ， 并 命名 id 的 属性 值 为 “inside”， 代 码 如 下 : 


<h1> 新 闻 中 心 </h1> 

<ul id="inside"> 

<1i> 专 家 建议 国 考 公开 计 分 标准 和 答案 ， 以 方便 考生 ……</1i> 
<1i> 好 心 带 讨 饭 者 回 家 ， 没 想到 反 被 他 们 抢 了 </1i> 
<1i> 新 107 国道 15 日 启用 </1i> 
<1i> 郑 州 明年 有 望 用 垃圾 发 电 </1i> 
<1i> 办 离婚 手续 起 争议 </1i> 
<1i> 煤 化 建 业 公 司 11 亿 元 拿 地 86 亩 </1i> 
<1i> 杭 州 回应 名 人 入 住 “别墅 保障 房 ”</1i> 
<1i> 官 员 遭 押 590 天 后 被 判 无 罪 ， 官 复原 职 </1i> 


</ul> 
(3) 接着 在 页 面 中 定义 娱乐 新 闻 的 “ul” 列 表 ， 它 是 一 个 普通 的 列表 ， 代 码 如 下 : 
<h1> 娱 乐 新 闻 </h1> 


<ul> 
<1i> 谁 在 整容 后 华丽 脱身 </1i> 
<1i> 超 女 们 加 油 </1i> 


</ul> 


(4) 继续 在 页 面 中 定义 房产 动态 的 “ul” 列 表 ， 并 定义 id 的 属性 值 为 “outside”， 


代码 
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如 下 : 
<h1> 房 产 动态 </h1> 
<ul id="outside"> 
<1i> 商 业 地 产 抗衡 住宅 地 产 </1i> 
<1i>“ 最 牛 钉子 户 ” 占 道 七 年 </1i> 
<1i>70 亿 富 婆 身 陷 “ 别 墨 保障 房 ”风波 </1i> 
<1i> 中 科 院 “住房 绿 皮 书 ”: 烽 房 价 泡沫 成 分 50%8</1i> 


</ul> 
(5) 在 页 面 中 定义 id 为 “inside” 的 “ul” 列 表 的 列表 项 样式 表 ， 代 码 如 下 : 
ul#inside 
{ 
list-style-position: inside; 
list-style-image:url (images/70040000iq.gif); 
} 


(6) 最 后 在 页 面 中 定义 id 为 “outside” 的 “ul” 列 表 的 列表 项 样式 表 ， 代 码 如 下 : 
ul#outside 
{ 
list-style-position: outside; 
list-style-image:url (images/10930000fq.gif); 


9.3.4 ”运行 结果 


【 例 9-4】“ 阶 梯形 ”的 新 闻 展 示 页 面 
在 下 浏览 器 中 运行 9-3.html 页 面 ， 出 现 如 图 9-9 所 示 的 界面 效果 。 
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图 9-9 “阶梯 形 ” 的 新 闻 展示 页 面 


9.3.5 ”实例 分 析 


Ce 


在 上 面 的 实例 中 定义 了 三 个 列表 ， 第 一 个 列表 项 样式 定义 将 项 目 符号 放 入 列表 项 内 部 ， 第 
三 个 列表 项 样式 定义 为 正常 模式 ， 而 第 三 个 列表 项 样式 定义 将 项 目 符号 突出 于 列表 项 内 容 ， 从 
而 形成 了 “阶梯 形 ”。 其 实 ， 大 家 可 以 将 第 一 个 列表 项 和 第 三 个 列表 项 分 别 与 第 二 个 列表 项 做 
比较 ， 第 二 个 列表 项 是 正常 模式 ， 这 样 就 能 很 清楚 地 了 解 到 list-style-position 属性 值 inside 和 
outside 的 区 别 了 。 


9.4 制作 文章 详解 页 面 


上 面 介绍 的 三 种 列表 样式 属性 ， 其 实 可 以 将 它们 集合 到 一 个 属性 中 ， 这 个 属性 就 是 list-style 
属性 , 那么 如 何 使 用 这 个 属性 呢 ? 使 用 这 个 属性 设置 列表 能 起 到 什么 样 的 效果 呢 ? 本 节 将 为 大 
家 讲述 list-style 的 相关 内 容 。 


上 视频 教学 : 光盘 /视频 /9/9.4 ”制作 文章 详解 页 面 .avi @O 长 度 : 5 分 名 


9.4.1 基础 知识 一 一 list-style 属性 


list-style 属性 是 一 种 同时 设置 标签 及 其 位 置 的 简略 方式 ， 它 的 值 包括 list-style-type、 
list-style-image 和 list-style-position 属性 的 所 有 合法 值 ， 其 格式 如 下 : 


list-tyle: [list-style-type] [list-style-position] [list-style-image] 


1. 按 顺序 设置 属性 


可 以 按 顺序 设置 如 下 三 个 属性 : 
® list-style-type; 

®@ list-style-position; 

@@ list-style-image。 

例如 : 


li{circle inside url (p9.jpg);} 


2. 存在 空缺 属性 


对 于 list-style-tyle 属性 、list-style-position 属性 和 list-style-image 属性 ， 可 以 出 现 空缺 ， 空 
缺 的 属性 将 使 用 默认 值 蔡 代 ， 例 如 : 


li{circle inside;} 


zo 
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3. 强制 设置 属性 


可 以 强制 设 定 list-style-type 属性 、list-style-position 属性 和 list-style-image 属性 的 值 ， 而 不 
采用 list-style 属性 值 的 默认 排序 ， 例 如 : 


1i{list-style-type:circle; list-style-position:inside; 
list-style-image:url (p9.jpg);} 


这 样 设置 ， 三 个 值 的 顺序 可 以 任意 调换 ， 并 且 也 可 以 出 现 空缺 ， 空 缺 的 属性 将 使 用 默认 值 
替代 。 例 如 ， 下 面 的 两 条 规则 是 等 价 的 。 
eh 
list-style-image:url (A001161 .jpg); 


list-style-image:url (A001161 .jpg); 
list-style-type:disc; 
list-style-position:outside; 


有 一 点 需要 注意 ， 如 果 既 定义 了 list-style-type 属性 ， 又 定义 了 list-style-image 属性 ， 那 么 
无 论 哪 个 属性 在 前 ， 将 会 以 list-style-image 属性 定义 的 列表 样式 出 现 ， 如 下 列 两 条 样式 规则 所 
显示 的 效果 是 相同 的 : 

olf 

list-style-type:circle; 
list-style-image:url (p9.jpg); 
list-style-position:outside; 


list-style-image:url (p9.jpg); 
list-style-type:circle; 
list-style-position:outside; 


在 下 浏览 器 中 运行 9.4.html， 效 果 如 图 9-10 所 示 。 


9-10 ”列表 样式 显示 


. so 


9.4.2 ”实例 描述 


使 用 list-style 属性 ， 可 以 创建 每 一 级 具有 不 同 编号 形式 的 嵌 套 列表 。 假 定 希 望 创建 一 组 三 
个 嵌 套 的 列表 , 第 一 个 列表 的 标签 是 decimal: 1、2、3…; 第 一 个 嵌 套 列表 的 标签 是 upper-alpha: 
A、B、C…; 第 二 个 嵌 套 列表 的 标签 是 upper-roman: I、II、IH…。 那 么 ， 下 面 我 们 就 来 制作 
一 个 具有 不 同 编号 形式 的 嵌 套 列表 吧 ! 


9.4.3 ”实例 应 用 


【 例 9-5】 制 作文 章 详解 页 面 
(1) 新 建 HTML 文件 ， 命 名 为 9-4.html。 
(2) 编辑 9-4.html 页 面 ， 在 页 面 中 定义 三 个 嵌 套 列表 ， 其 详细 代码 如 下 : 


<hl align="center"> 文 章 讲 解 </h1> 
<div id="divol"> 
<p> 
list-style 属性 是 一 种 同时 设置 标签 及 其 位 置 的 简略 方式 ， 它 的 值 包括 
list-style-type、 list-style-image 和 <br />list-style-position 属性 的 所 有 
合法 值 。 
</p> 
<ol> 
<1i> 按 顺序 设置 属性 </1i> 
<1i> 存 在 空缺 属性 </1i> 
<ol> 
<1li>list-style-type 空缺 </1i> 
<li>list-style-position 空缺 </1i> 
<ol> 
<1i> 默 认 值 为 outside</1i> 
<1i> 设 置 属性 值 为 inside</1i> 
</ol> 
<1li>list-style-image 空缺 </1i> 
</ol> 
<1i> 强 制 设置 属性 </1i> 
</ol> 
</div> 


(3) 定义 三 个 嵌 套 列表 的 列表 项 样式 , 即 第 一 个 列表 项 的 项 目 符号 为 十 进 制 数 字 项 目 符号 、 
第 二 个 嵌 套 列表 项 的 项 目 符号 为 大 写字 母 项 目 符号 、 第 三 个 嵌 套 列表 项 的 项 目 符号 为 大 写 罗 马 
数字 项 目 符号 ，CSS 代码 如 下 : 
OL { list-style: decimal } 


OL OL { list-style: upper-alpha } 
OL OL OL { list-style: upper-roman } 
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9.4.4 运行 结果 


在 正 浏 览 器 中 运行 9-4.html 页 面 ， 其 结果 如 图 9-11 所 示 。 


i 它 的 值 站 
性 的 所 有 合法 值 。 
存在 空 读 属 性 
Bist-styie-posiion 空 读 


图 9-11 文章 详解 页 面 


9.4.5 ”实例 分 析 


点 源码 解析 : 


在 上 面 的 实例 中 定义 了 三 个 谋 套 列表 ,第 一 个 谋 套 列表 的 列表 项 的 项 目 符号 为 1、2、3.…， 
在 它 的 第 二 个 列表 项 下 面 又 谋 套 了 两 个 列表 : 第 一 个 列表 项 的 项 目 符号 为 A、B、C.…; 第 二 
个 列表 项 的 项 目 符号 为 TI、_I、II…， 如 上 面 所 述 的 这 种 格式 可 以 使 用 list-style 属性 设置 ， 代 码 
简洁 ， 使 用 灵活 。 


9.5 ”常见 问题 解答 


9.5.1 list-style 和 list-style-type 在 IE 中 不 显示 的 问题 


[Es list-style 和 list-style-type 在 IE 中 不 显示 的 问题 


[2 角 网 络 课 堂 ; http://bbs.itzcn.com/thread-12272-1-1.html 
网 页 排版 时 会 遇 到 “list-style” 和 “list-style-type” 在 正 中 不 显示 ， 而 在 Firefox 中 正常 显 
示 的 问题 ， 这 是 怎么 回 事 啊 ? 
【解决 办 法 】 经 过 我 的 研究 ， 发 现 <ul> 元 素 在 下 和 Firefox 中 有 “跟随 且 自 动 缩 进 ”的 特 
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性 ， 就 是 当 一 个 <ul> 前 面 有 <img> 元 素 且 设置 了 <img> 的 align=“left” 时 ， 在 正 和 Firefox 中 
的 “liststyle” 和 “list-style-type” 都 显示 不 正常 ， 比 如 下 面 的 代码 : 
<img src="684.jpg" align="left"/> 
<ul> 
<1i> 第 一 项 </1i> 
<1i> 第 二 项 </1i> 
<1i> 第 三 项 </1i> 
</ul> 


I 下 的 解决 办 法 就 是 设置 <ul> 标 签 的 “width” 属 性 和 “padding-left” 属 性 ，“padding-left” 
的 值 应 该 二 15， 即 : 


<style type="text/css"> 
ulf{ 


padding-left:15px; 
width:450px; 
} 
</style> 


或 者 使 用 <div> 标 签 将 <ul> 包 住 ， 设 置 div 元 素 的 样式 为 : 


float:left; 
padding-left:15; 


9.5.2 list-style-type 在 IE 与 Firefox 中 奇怪 的 现象 


list-style-type 在 本 E 与 Firefox 中 奇怪 的 现象 
网 络 课堂 : http://bbs.itzen.com/thread-12275-1-1.html 


最 近 在 学 习 CSS， 就 做 了 一 个 有 关 列 表 的 页 面 ， 这 是 我 的 代码 片段 : 


<style type="text/css"> 
.blockcont4 { 

height:277px; 

border: lpx #becbcb solid; 


} 

.olleft { 
margin:6px 16px 6px 38px; 
list-style-type:circle; 
width:auto; 

} 

.0lleft 1i { 
height:22px;line-height:22px;white-space:nowrap;overflow:hidden; 
} 

-Olleft i aclink { 
display: block;height:22px; 
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.Olleft 1i a:hover { 

background-color: red; 

} 
</style> 
<body> 
<div class="blockcont4"> 
<ol class="olleft"> 
<1i>Div CSS 布局 关于 分 辩 率 与 100$ 自 适应 问题 的 探讨 ! </1i> 
<1i>CSS 基础 实例 : css 实现 带 背 景 图 片 的 文字 链接 的 方法 </1i> 
<1i>DIV Css 实例 教程 :一 款 清新 风格 的 css 新 闻 列 表 制 作 </1i> 
<1i>CSS 布局 教程 : 如何 用 css 构建 图 片 、 文 字 混 排 的 产品 展示 ? </1i> 
<1i>css 布局 教程 : 用 DIV Css 实现 国内 经 典 式 三 行 两 列 布局 </1i> 
<1i><a>DIV CSS 实例 教程 :蔚蓝 色 的 海洋 漂亮 的 css 纵向 菜单 </a> </1i> 
<1i>DIV CSS 菜单 实例 : 红 与 黑 具有 立体 质感 的 css 菜单 </1i> 
<1i>DIV CSS 横向 菜单 实例 : 简单 的 思路 陷 下 的 风格 不 错 的 效果 </1i> 
</ol> 
</div> 
</body> 


不 知道 为 什么 ， 上 面 这 段 代 码 的 列表 样式 (list-style-type:circle:) 在 Firefox 中 不 显示 ， 但 在 
下 中 显示 正常 。 在 上 面 的 代码 中 ， 我 定义 了 超 链接 的 display:block， 在 Firefox 下 显示 正常 ， 
突出 显示 部 分 (background-color:red:)， 但 在 正 下 却 不 显示 ， 这 是 怎么 回 事 啊 ? 

【解决 办 法 】 对 于 上 面 提出 的 第 一 个 问题 ， 是 因为 没有 定义 liststyle-position， 所 以 在 
Firefox 中 列表 预 设 标记 无 法 显示 ; 第 二 个 问题 是 由 于 没有 定义 A 的 宽度 ， 故 没有 显示 。 需 要 
修改 上 面 CSS 样式 表 中 的 两 个 类 样式 ， 修 改 内 容 如 下 : 

.olleft { 

margin:6px 16px 6px 38px; 
list-style-type:circle; 
list-style-position: inside ; 
width:auto; 


} 

sOlleft 1 alink 4 
display: block;height:22px; 
width:500px; 


9.5.3 关于 ul ul ul 的 CSS 规则 定义 问题 


项 辆 ”关于 lulul 的 CSS 规则 定义 问题 


[es 吸 网 络 课堂 : http://bbs.itzen.com/thread-12277-1-1.html 


在 Dreamweaver 8 的 CSS 定义 中 , 可 以 有 此 类 定义 : ulul 定义 和 ululul 定义 。 它 们 的 CSS 
代码 分 别 是 Ql ul {list-style-type: discy 和 ululul {list-style-type:square}。 我 只 知道 无 序列 表 ul 的 
CSS 定义 ， 请 问 : 怎样 理解 uiul 或 ululul 的 CSS 规则 定义 ? 
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【解决 办 法 】 首 先 你 要 理解 CSS 命名 规则 ， 比 如 : 


<div class="divi”><ul></ul></div> 

如 果 你 想 定 义 这 个 ul 的 样式 ， 可 以 直接 这 样 定义 : 

ul{list-style-type;disc;} 

但 是 这 样 定义 太 广泛 了 ， 这 个 是 让 所 有 的 列表 项 的 项 目 符号 都 为 实心 圆 点 。 如 果 这 个 页 面 
还 有 其 他 ul， 也 会 受到 影响 。 为 了 精确 地 定义 这 个 div 下 的 由 ， 可 以 这 样 定义 : 

al ul{list-style-type:disc;} 

代码 表示 类 al 下 的 列表 项 的 项 目 符号 为 实心 圆 点 ， 这 样 不 会 影响 到 其 他 的 列表 样式 。 可 
以 看 出 命名 规则 是 这 样 的 : 在 需要 定义 的 样式 前 加 上 父 级 的 类 名 , 来 精确 地 指定 要 给 哪个 列表 
定义 样式 。 可 以 在 前 面 加 上 无 数 个 父 级 类 名 来 区 分 要 设置 的 样式 。 那 么 根据 代码 “ul 
ul{list-style-type:disc}”， 意 思 就 是 设置 dl 下 的 dQ 的 列表 项 的 项 目 符号 为 实心 圆 点 ;而 另 一 个 

“ul ul ulf{list-style-type:square} ”的 意思 就 是 设置 ul 下 的 忆 下 的 ml 的 列表 项 的 项 目 符号 为 实心 

方形 项 目 符号 。 


9.6 习 题 
1. 填空 题 
(1) CSS 中 可 以 使 用 属性 为 列表 项 定义 项 目 符号 。 


(2) 在 下 面 的 代码 中 ， 如 果 在 该 页 面 所 在 的 目录 下 不 存在 p9.gif 图 片 时 ， “ol” 列表 项 的 
项 目 符号 为 
<ol style="list-style-image:url(p9.gif); list-style-type:circle;"> 
<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<1i>《 老 照片 》</1i> 
<1i>《 中 华 传统 文化 经 典 文库 》</1i> 


</ol> 


(3) list-style-position 属性 的 有 效 值 有 三 个 ， 分 别 是 inside、onutside 和 inherit， 默 认 值 为 


(4) 在 设置 list-style 属性 时 ， 如 果 既 定义 了 list-style-type 属性 ， 又 定义 了 list-style-image 
属性 ， 那 么 无 论 哪个 属性 在 前 ， 将 会 以 属性 定义 的 列表 样式 出 现 。 
2. 选择 题 
(1) 有 这 样 的 一 段 代 码 : 
<ol style="list-style-type:decimal;"> 
<1i>《 世 界 博物 馆 巡 礼 系列 》</1i> 
<li style="1list-style-type:none">《 大 地 玫瑰 包 系列 》</1i> 


<1i style="1list-style-type:none">《 经 济 学 家 茶座 》</1i> 
<1i>《 鼠 疫 》</1i> 
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<1i>《 我 把 青春 献 给 您 》</1i> 


</o1> 
请 问 : 第 4 个 列表 项 的 项 目 符号 为 
A. 2 B. 3 C.4 5 
(2) 在 CSS 中 ， 可 以 使 用 属性 来 实现 图 像 列表 。 
A. list-style-image B. list-style-type 
C. list-style-position D. list-style 


(3) 怎样 给 所 有 的 <hl> 标 签 添加 背景 颜色 ? 
A. hl{background-color:#FFFFFF} 
B. hlf{background-color:#FFFFFF:;} 
C. hlall {background-color:#FFFFFF} 
D. #hl{background-color:#FFFFFF} 
(4) 如 何 能 够 定义 列表 的 项 目 符号 为 实心 方形 ? 


A. list-type:square B. type:2 
C. type: square D. list-style-type:square 
(5) list-style 属性 是 一 种 同时 设置 标签 及 其 位 置 的 简略 方式 ， 它 的 值 包 括 list-style-type、 
list-style-image 和 list-style-position 属性 的 所 有 合法 值 ， 可 以 按 顺序 来 设置 属性 值 。 


A. list-style-type list-style-image list-style-position 
B. list-style-type list-style-position list-style-image 
C. list-style-position list-style-image list-style-type 
D. list-style-position list-style-type list-style-image 


(6) 下 面 的 CSS 代码 定义 了 两 个 列表 ， 第 一 个 列表 的 列表 项 的 项 目 符号 为 ， 而 
第 二 个 列表 的 列表 项 的 项 目 符号 为 
olf 


list-style-type:circle; 
list-style-image:url (p9.jpg); 
list-style-position:outside; 


list-style-image:url (p9.jpg); 
list-style-type:circle; 
list-style-position:outside; 


A.， 实心 圆 点 p9.jpg 图 片 B. 都 是 实心 圆 点 
C. 都 是 p9.jpg 图 片 D. 都 没有 项 目 符号 
3. 上 机 练习 


上 机 练习 : 设计 文档 结构 图 效果 页 面 

以 某 章 的 目录 为 例 ， 设 计 文档 结构 图 效果 页 面 。 

首先 定义 有 序列 表 , 列表 项 有 4 个 , 分 别 是 泪 镜 特效 、 列表 、 定 位 与 布局 和 和 鼠标 指针 。 其 中 ， 
需要 在 “ 滤 镜 特效 ”列表 项 下 面 定 义 一 个 谋 套 的 有 序列 表 ， 列表 项 为 : Alpha 滤 镜 、BlendTrans 
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滤 镜 、Blur 滤 镜 、Chroma 滤 镜 和 DropShadow 滤 镜 ; 还 需要 在 “定位 与 布局 ”列表 项 下 面 定 
义 嵌 套 列 表 ， 列 表 项 包括 : 定位 属性 、 边 偏 移 属性 、position 属性 和 overflow 属性 。 运行 结果 
如 图 9-12 所 示 。 


111 ph 站 给 
112 BleadTmn: 泪 策 


4 13 定位 与 布局 
133 定位 民 性 
133 这 仿 移 属性 
133 position 属 性 
13.4 overfw 属 性 


图 9-12 文档 结构 图 页 面 的 运行 效果 
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内 容 摘要 : 
我 们 在 网 页 中 浏览 内 容 时 ， 当 网 页 内 容 显示 超出 浏览 器 可 视 范 围 时 ， 就 会 出 现 滚 动 条 。 其 
实 ， 在 一 个 层 中 也 可 以 出 现 滚动 条 。 要 在 层 中 出 现 滚动 条 ， 我 们 可 以 使 用 CSS 设置 层 的 滚动 
条 属性 ， 而 且 还 可 以 设置 滚动 条 边 的 颜色 等 。 在 本 章 中 将 详细 介绍 如 何 使 用 CSS 的 滚动 条 
属性 。 
学 习 目标 : 
@ 掌握 如 何 设置 滚动 条 亮 边框 颜色 
@ 掌握 如 何 设置 滚动 条 3D 界面 亮 边 框 颜色 
@ 掌握 如 何 设置 滚动 条 3D 表面 的 颜色 
@ 掌握 如 何 设置 滚动 条 方向 箭头 的 颜色 
@ ”掌握 如 何 设置 滚动 条 3D 界面 的 暗 边 颜 色 
@ 掌握 如 何 设置 滚动 条 暗 边框 颜色 
@ 掌握 如 何 设置 滚动 条 基准 颜色 
@ 掌握 如 何 设置 滚动 条 拖 动 区 域 闫 色 


10.1 制作 带 有 彩色 3D 亮 边框 的 滚动 条 


在 网 页 中 ， 我 们 常常 会 看 到 滚动 条 ， 但 这 些 经 浏览 器 支持 的 滚动 条 ， 大 多 形式 比较 单一 ， 
CSS 的 样式 可 以 改变 这 种 单一 的 形式 ， 例 如 给 滚动 条 的 亮 边框 添加 颜色 等 。 


各 视频 教学 ， 光盘 /视频 /10/10.1 制作 带 有 彩 色 3D 亮 边 框 的 滚动 条 avi @ 长 度 : 5 分 钟 


10.1.1 基础 知识 一 一 scrollbar-3dlight-color 


在 一 般 页 面 中 ， 滚 动 条 都 显示 在 浏览 器 的 右 侧 。 而 滚动 条 3D 亮 边框 是 指 右 侧 滚 动 条 中 显 
示 在 滑 块 和 箭头 区 域 最 外 层 左 侧 和 项 部 的 区 域 。 在 我 们 使 用 之 前 ， 先 看 看 设置 滚动 条 亮 边 框 颜 
色 的 语法 结构 。 

滚动 条 的 3D 亮 边框 颜色 属性 语法 结构 如 下 所 示 : 


scrollbar-3dlight-color: color; 


一 般 情 况 下 我 们 会 先 在 页 面 中 定义 一 个 div, 当 在 div 内 输入 的 内 容 过 多 时 会 给 这 个 div 定 
一 个 滚动 条 属性 ， 为 这 个 滚动 条 添加 一 些 修饰 属性 无 疑 会 给 页 面 增加 亮点 。 

例如 ， 下 面 的 实例 代码 : 

divi{ 

overflow:scroll; 


scrollbar-3dlight-color:#000000; 
} 


在 CSS 的 div 样式 里 添加 这 些 代码 ， 就 可 添加 滚动 条 属性 ， 并 为 滚动 条 亮 边框 设置 颜色 为 
#000000。 


6© 当 在 <html> 元 素 中 定义 了 滚动 条 3D 亮 边框 颜色 属性 后 , 其 子 元 素 都 将 继承 这 个 属 
经 示 | 。 性 中 定义 的 显示 效果 。 


10.1.2 ”实例 描述 


有 时 一 张 页 面 不 足以 显示 全 部 的 内 容 ， 这 时 浏览 器 会 显示 自 带 的 滚动 条 ， 而 这 些 滚动 条 在 
浏览 器 中 都 有 固定 的 样式 。 但 是 可 以 使 用 CSS 的 样式 给 我 们 自 定义 的 div 的 滚动 条 添加 样式 
比如 为 滚动 条 设置 亮 边框 的 颜色 。 


10.1.3 ”实例 应 用 


【 例 10-1】 制作 带 有 彩色 3D 亮 边 框 的 滚动 条 
(1) 新 建 一 个 HIML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
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(2) 接 下 来 在 div 标记 box_greyc 里 写 入 以 下 代码 。 


<div class= box grey > 
<strong> 蓝 色 心 情 许 愿 墙 </ strong></h3> 

<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
< 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


</p></div> 
(3) 下 面 来 对 这 个 div 定义 样式 ,首先 定义 这 个 div 的 高 度 、 宽 度 和 边框 属性 ,这 里 我 们 要 
用 到 滚动 条 ， 所 以 就 要 定义 滚动 条 及 设置 滚动 条 亮 边 框 的 颜色 。 代 码 如 下 : 
div -box_greyf 
height:200px; 


overflow:scroll; 
scrollbar-3dlight-color:#F00; 


10.1.4 ”运行 结果 


在 浏览 器 中 直接 打开 实例 HTML 文件 。 此 时 会 看 到 如 图 10-1 所 示 的 页 面 ， 在 这 个 页 面 中 
我 们 可 以 看 到 滚动 条 中 红色 的 部 分 就 是 要 设置 的 亮 边 框 的 颜色 。 


10-1 设置 彩色 3D 亮 边框 的 实例 运行 效果 


10.1.5 ”实例 分 析 


ye 


在 这 个 实例 中 ,我们 用 到 了 设置 滚动 条 亮 边 框 颜色 属性 来 实现 亮 边 框 的 效果 ， 学 会 之 后 ， 
我 们 可 以 随意 地 设置 想 要 的 颜色 。 
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10.2 制作 带 有 彩色 亮 边框 的 滚动 条 


滚动 条 亮 边框 是 指 右 侧 显示 的 滚动 条 中 与 滚动 条 3D 亮 边 框 相 邻 的 区 域 。 使 用 
scrollbar-highlight-color 属性 可 以 设置 滚动 条 3D 界面 亮 边框 颜色 。 


,视频 教学 ， 光盘 /视频 /10/10.2 ”制作 带 有 彩色 竞 边框 的 滚动 条 avi。 @@ 长 度 : 4 分 名 


10.2.1 基础 知识 一 一 scrollbar-highlight-color 


scrollbar-highlight-color 属性 可 以 设置 滚动 条 3D 界面 亮 边 框 颜色 。 在 使 用 时 要 注意 ， 在 单 
独 使 用 滚动 条 亮 边框 颜色 属性 时 ， 将 对 滚动 条 其 他 部 分 的 颜色 产生 影响 。 

语法 格式 如 下 : 

scrollbar-highlight-color: color; 


亮 边 框 是 滚动 条 中 和 3D 亮 边 框 相 邻 的 部 分 ， 我们 可 以 为 它 设置 不 同 的 颜色 ， 以 达到 为 页 
面 增色 的 效果 。 

例如 以 下 实例 代码 : 

divi{ 

overflow:scroll; 


scrollbar-highlight-color:#F00000; 
} 


10.2.2 ”实例 描述 


通常 浏览 器 的 滚动 条 中 的 亮 边 框 有 固定 的 颜色 ， 我 们 在 网 页 中 使 用 滚动 条 时 ， 会 出 现 与 要 
设计 的 网 页 颜色 不 搭配 的 现象 , 这 时 我 们 就 可 以 通过 设置 滚动 条 亮 边框 的 颜色 来 对 页 面 颜色 进 
行 协调 。 


10.2.3 ”实例 应 用 


【 例 10-2】 制 作 带 有 彩色 亮 边 框 的 滚动 条 
(1) 新建 一 个 HIML 页 面 ， 设 置 背景 颜色 为 村 C9，CSS 样式 代码 如 下 : 


body{ 
padding:1l0px 0 0 0; 
background-attachment: fixed; 
background-color: #FC9; 
padding-left:100px; 


(2) 在 页 面 中 新 建 一 个 div 标记 ， 在 里 面 写 入 一 段 文 字 ， 以 便 出 现 滚动 条 。 
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<div align="center"> 朋 友 如 海 ， 宽 容 作 舟 ， 泛 舟 于 海 ， 方 知 海 之 宽阔 :朋友 如 山 ， 宽 容 为 径 ， 循 
径 登 山 ， 方 知 山 之 高 大 ; 朋友 交心 ， 交 而 知心 ， 心 心 相 印 ， 方 知心 之 高 尚 。” <br /> 

人 的 一 生 难 得 有 几 个 知心 朋友 ， 也 许 有 人 说 那 也 不 是 啊 ， 我 就 有 好 多 的 知心 朋友 。 可 是 或 许 你 对 他 们 
是 真心 的 ， 而 他 们 是 不 是 和 你 对 他 们 一 样 就 不 得 而 知 了 。 我 见 过 好 多 表面 上 好 得 跟 一 个 人 似 的 ， 但 是 私 
下 里 却 是 你 说 我 的 不 是 我 说 你 的 不 对 ， 我 觉得 这 样 还 不 如 不 做 朋友 的 好 。 <br /> 

我 觉得 自己 还 算是 比较 幸运 的 了 ， 在 学 校 时 有 谈 得 来 的 朋友 。 参 加 工作 了 更 让 我 遇 到 一 个 我 特别 感激 
的 朋友 ， 虽 然 说 我 俩 的 性 格 相差 十 万 人 千里。 她 属于 很 活泼 ， 很 健谈 的 那 种 ， 而 我 却 是 性 格 内 向 ， 不 善 
言谈 的 。 可 是 只 要 我 们 俩 到 一 起 就 有 说 不 完 的 话 ， 说 给 其 他 同事 听 他 们 还 都 不 信 ， 因 为 他 们 都 知道 我 的 
性 格 ， 是 那 种 可 能 别人 说 十 句 ， 我 才 回 一 句 的 那 种 人 ， 可 能 也 因此 让 他 们 觉得 我 不 好 接近 ， 可 是 实际 上 
我 内 心 不 是 这 样 想 的 ， 可 是 就 是 跟 他 们 在 一 起 就 觉得 紧张 说 不 出 话 来 ， 也 不 知道 是 什么 原因 。 说 实话 ， 
连 我 自己 都 觉得 奇怪 ， 我 一 般 和 不 太 熟 悉 的 人 话 上 特别 少 的 ， 总 觉得 跟 他 们 没有 什么 话 可 以 延伸 下 去 ， 
可 是 跟 她 第 一 次 见面 我 们 就 聊 了 一 个 晚上 ， 真 的 特别 开心 能 有 这 样 一 个 朋友 ， 有 什么 话 都 可 以 跟 她 说 。 
而 在 平时 她 就 像 一 个 大 姐姐 一 样 。 我 的 依赖 思想 特别 重 ， 做 什么 事 总 想 着 前 面 有 人 带 着 ， 所 以 每 次 有 什 
么 事 她 都 在 前 面 我 跟 在 后 面 做， 当然 我 也 知道 这 个 不 好 所 以 我 尽量 改正 自己 的 这 个 缺点 。 我 是 一 个 情感 
不 外 露 的 人 ， 不 管 我 心里 对 她 是 多 么 的 感激 ， 我 都 不 会 把 感谢 常 挂 在 嘴 上 ， 倒 不 是 因为 别 的 什么 而 是 我 
觉得 这 样 的 话 放 在 心里 就 可 以 了 不 需要 常常 拿 出 来 说 。 <br /> 

知心 的 朋友 真 的 是 很 难得 的 ， 如 果 你 拥有 了 这 份 友谊 就 不 要 轻易 地 去 破坏 它 。 <br /> 


</div> 
(3) 接 下 来 定义 div 的 CSS 样式 ， 如 宽度 、 高 度 、 边 框 大 小 和 滚动 条 属性 等 。 代 码 如 下 : 
div 
{ 
height:300px; 
width:400px; 
padding:1l0px 0 0 0; 
border:lpx solid #666666; 
overflow:scroll; 
scrollbar-highlight-color:#F00000; 
} 


(4) 保存 HTML 页 面 ， 完 成 CSS 样式 的 定义 。 


10.2.4 ”运行 结果 


将 页 面 在 浏览 器 中 打开 ， 我 们 可 以 看 到 如 图 10-2 所 示 滚 动 条 的 亮 边 框 的 颜色 为 橘红 色 。 


1 互 -stm - 


图 10-2 ”设置 滚动 条 亮 边 框 颜色 的 实例 运行 效果 
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10.2.5 实例 分 析 


让 源码 解析 : 
在 


以 上 实例 中 ， 我 们 使 用 了 滚动 条 属性 scrollbar-highlight-color 来 设置 滚动 条 竞 边 框 的 颜 
色 。 以 后 可 以 使 用 这 个 属性 来 为 我 们 的 网 页 设计 出 绚丽 的 滚动 条 。 


0 | ”在 单独 使 用 滚动 条 亮 边 框 颜色 属性 时 ， 将 对 滚动 条 其 他 部 分 的 颜色 产生 影响 。 


10.3 制作 彩色 滚动 条 区 块 


滚动 条 3D 表面 也 就 是 滚动 条 的 滑 块 的 表面 ， 指 右 侧 显示 的 滚动 条 中 ， 可 以 使 用 鼠标 上 下 
拖 动 的 区 域 ， 以 及 箭头 区 域 部 分 。 我 们 可 以 通过 滚动 条 的 scrollbar-face-color 属性 来 设置 它 表 
面 的 颜色 。 


ca 视频 教学 : 光盘 /视频 /10/10.3 ”制作 彩色 滚动 条 区 块 .avi 图 长 度 : 4 分 钟 


10.3.1 基础 知识 一 一 scrollbar-face-color 


scrollbar-face-color 属性 是 用 来 设置 滚动 条 3D 表面 的 颜色 的 ， 在 设置 颜色 时 ， 要 注意 页 面 
之 间 的 颜色 搭配 。 


语法 格式 如 下 : 


scrollbar-face-color color; 


例如 我 们 可 以 通过 上 面 的 语法 在 CSS 样式 中 给 div 层 中 的 滚动 条 的 表面 设置 颜色 , 如 设置 
红色 ， 代 码 如 下 : 

div 

{ 

height:100px; 

width:400px; 

padding:80px 0 0 0; 

border:lpx solid #666666; 

overflow:scroll; 


scrollbar-face-color:#F00000; 
| 


上 述 代 码 中 ， 先 使 用 overflow 属性 为 div 添加 滚动 条 ， 然 后 使 用 scrollbar-face-color 属性 
添加 滚动 条 3D 表面 的 颜色 为 红色 (#000000)。 


mi >> 
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\ 设置 滚动 条 表面 颜色 时 ， 应 注意 颜色 的 搭配 。 必 须 只 有 在 滚动 条 出 现 的 情况 下 ， 
8 去 | 。 表面 的 颜色 效果 才 会 显示 。 
10.3.2 ”实例 描述 
在 网 页 中 我 们 需要 在 一 定 的 区 域 放置 很 多 不 同 的 内 容 , 但 毕竟 一 张 页 面 内 容 承载 量 是 有 限 


的 。 我 们 可 以 通过 增加 滚动 条 ， 在 一 个 页 面 中 添加 更 多 的 内 容 ， 有 时 这 些 内 容 的 区 块 需要 在 页 
面 中 突出 显示 ， 我 们 可 以 通过 设置 滚动 条 的 3D 表面 的 不 同 颜色 来 区 分 各 个 不 同 的 区 块 。 


10.3.3 ”实例 应 用 


【 例 10-3】 彩 色 滚动 条 区 块 
(1) 新 建 一 个 HTML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
(2) 接 下 来 在 div 标记 box_greyc 中 写 入 以 下 代码 。 
<div class= box grey > 
<strong> 蓝 色 心 情 许愿 墙 </strong></h3> 
<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 
让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


</p></div> 
(3) 定义 div2 的 CSS 样式 : 我 们 把 滚动 条 表面 颜色 定义 为 蓝 色 ， 其 代码 如 下 : 


div .box grey{ 
height:200px; 
overflow:scroll; 
scrollbar-face-color:#F00; 


} 
(4) 保存 这 个 页 面 ， 命 名 为 index.html， 这 样 就 把 CSS 样式 定义 好 了 。 


10.3.4 ”运行 结果 


将 页 面 index.html 在 浏览 器 中 运行 ， 可 以 看 到 效果 如 图 10-3 所 示 。 


Ecoio | 


i 
: 新 上 传 了 有 鱼 的 图 片 ， 霹 请 下 垢 1 


党 站 色 心 居 诗 医术 到 
: 人 大人 


永久 地 挂 下 


10-3 ”设置 彩色 滚动 条 区 块 的 实例 运行 效果 


10.3.5 ”实例 分 析 


Bn 


以 上 实例 是 通过 设置 滚动 条 的 颜色 属性 scrollbar-face-color 来 实现 的 ， 通 过 这 个 属性 ， 我 
们 可 以 把 滚动 条 分 成 颜色 不 同 的 区 块 。 


@ 在 设置 这 种 不 同 的 区 块 时 ， 由 于 我 们 用 到 的 是 滚动 条 ， 所 以 要 把 滚动 条 设置 成 始 


10.4 制作 突出 方向 箭头 


滚动 条 箭头 是 指 右 侧 滚动 条 中 在 滚动 条 的 顶部 和 底部 显示 的 三 角 箭头 区 域 部 分 , 单 击 三 角 
区 域 可 以 使 滚动 条 上 下 滚动 。 我 们 可 以 使 用 scrollbar-arrow-color 属性 来 为 滚动 条 方向 箭头 设置 


颜色 。 
视频 教学 ， 光盘 /视频 /10/10.4 ”制作 突出 方向 箭头 .avi 长 度 : 3 分 名 


10.4.1 基础 知识 一 一 scrollbar-arrow-color 


scrollbar-arrow-color 属性 可 以 在 CSS 样式 中 设置 滚动 条 方向 箭头 的 颜色 。 方 向 箭头 一 般 有 
默认 的 颜色 。 我 们 通过 这 个 属性 来 设置 方向 箭头 不 同 的 颜色 ， 可 以 使 箭头 在 网 页 中 起 到 突出 显 
示 的 效果 。 

使 用 语法 格式 如 下 : 


scrollbar-arrow-color: color 
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例如 我 们 可 以 通过 上 面 的 语法 在 CSS 样式 中 给 div 层 中 的 滚动 条 的 方向 箭头 设置 颜色 , 如 
设置 成 红色 ， 代 码 如 下 : 

div 

{ 

scrollbar-arrow-color:#F00000; 

height:100px; 

width:400px; 

padding:100px 0 0 0; 

border:lpx solid #666666; 

overflow:scroll; 


} 


上 述 代码 中 ， 我 们 先 使 用 overflow 属性 为 div 添加 滚动 条 。 然 后 使 用 scrollbar-arrow-color 
属性 设置 滚动 条 方向 箭头 的 颜色 为 红色 (上 性 000000)。 


\ 
外 | 在 设置 时 注意 ， 磊 色 尽量 不 要 与 页 面 的 颜色 相同 。 


10.4.2 ”实例 描述 


有 时 在 使 用 滚动 条 时 ， 虽 然 用 鼠标 滚动 页 面 很 方便 ， 但 是 一 些 细小 的 滚动 还 是 需要 借助 鼠 
标 左 键 单 击 滚动 条 的 方向 箭头 来 完成 。 可 是 有 时 这 些 箭头 与 页 面 的 颜色 很 接近 ， 要 找到 它 并 单 
击 可 能 不 太 方便 。 这 时 我 们 就 可 以 使 用 滚动 条 的 scrollbar-arrow-color 属性 来 为 其 设置 突出 的 颜 
色 ， 以 方便 快速 地 查找 到 滚动 条 的 方向 箭头 。 


10.4.3 ”实例 应 用 


【 例 10-4】 制 作 突出 方向 箭头 
(1) 新 建 一 个 HTML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
(2) 接 下 来 在 div 标记 box_greye 里 写 入 以 下 代码 : 
<div class= box grey > 
<strong> 蓝 色 心 情 许 愿 墙 </strong></h3> 
<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 


都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 


让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 
</p></div> 
(3) 定义 div 的 CSS 样式 : 包括 高 度 、 宽 度 、 边 框 的 粗 度 和 颜色 、 滚 动 条 ， 并 使 用 
scrollbar-arrow-color 属性 来 设置 滚动 条 方向 箭头 的 颜色 为 红色 ， 代 码 如 下 所 示 : 


div .box _ greyf 
scrollbar-arrow-color:#FF0000; 


< 人 mm 


ss Web 开 发 学 习 实录 .入 


height:200px; 
overflow:scroll; 
scrollbar-face-color:#F00; 


10.4.4 ”运行 结果 


将 保存 的 页 面 index.html 在 正 浏览 器 中 运行 ， 可 以 看 到 如 图 10-4 所 示 的 效果 ， 有 
scrollbar-arrow-color 属性 定义 的 红色 方向 箭头 。 
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图 10-4 设置 红色 突出 方向 箭头 的 实例 运行 效果 


10.4.5 “实例 分 析 


we 


在 本 实例 中 ， 看 到 的 效果 是 通过 滚动 条 颜色 属性 的 scrollbar-arrow-color 属性 来 实现 的 ， 
我 们 可 以 看 到 图 10-4 所 示 方 框 中 滚动 条 的 箭头 为 红色 ， 而 且 我 们 还 可 以 为 它 设置 不 同 的 颜色 。 


10.5 制作 突出 滚动 条 阴影 效果 


滚动 条 3D 界面 的 暗 边 也 就 是 滚动 条 的 阴影 部 分 ， 主 要 是 指 滚动 条 中 显示 在 滚动 条 拖 动 区 
域 和 箭头 区 域 的 右 侧 和 底 侧 部 分 。 我 们 可 以 使 用 滚动 条 的 scrollbar-shadow-color 属性 来 为 它 设 


置 颜 色 。 
上 视频 教学 : 光盘 /视频 /10/10.5 ”制作 突出 滚动 条 阴影 效果 .avi 人 @@ 长 度 : 4 分 名 
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10.5.1 基础 知识 一 一 scrollbar-shadow-color 


scrollbar-shadow-color 属性 是 CSS 中 滚动 条 的 颜色 设置 属性 , 我 们 可 以 在 CSS 的 样式 中 设 
置 滚动 条 3D 界面 的 暗 边 -- 也 就 是 滚动 条 阴影 的 颜色 。 
语法 格式 如 下 : 


scrollbar-shadow-color:color; 


这 样 便 可 以 通过 上 面 的 语法 在 CSS 样式 中 给 滚动 条 的 3D 界面 的 暗 边 设置 颜色 , 在 这 里 设 
置 的 颜色 为 蓝 色 (#0000FF)， 其 代码 如 下 : 

div 

{ 

overflow:scroll; 

scrollbar-shadow-color:#0000FF; 

height:100px; 

width:100px; 

border:lpx solid #666666; 

} 


在 以 上 代码 中 ， 首 先 用 overflow 属性 设置 层 中 的 滚动 条 始终 显示 ， 然 后 用 
scrollbar-shadow-color 设置 滚动 条 3D 界面 的 暗 边 的 颜色 为 蓝 色 。 


@ ” 滚动 条 3D 界面 的 暗 边 的 颜色 最 好 不 要 与 暗 边 的 颜色 一 致 或 相近 ， 不 然 效 果 会 不 
提示 太 明显 。 


10.5.2 ”实例 描述 


在 设计 页 面 时 ， 好 的 阴影 效果 会 给 页 面 增加 不 少 亮点 ， 如 果 阴 影 的 颜色 设计 得 当 ， 更 是 锦 
上 添 花 。 在 设置 滚动 条 时 ， 通 常会 用 到 滚动 条 的 阴影 效果 ， 也 就 是 滚动 条 的 3D 界面 的 暗 边 ， 
我 们 可 以 使 用 CSS 样式 中 滚动 条 的 scrollbar-shadow-color 属性 设置 适合 的 颜色 , 以 突出 页 面 的 
效果 。 


10.5.3 ”实例 应 用 


【 例 10-$】 突 出 滚动 条 阴影 效果 

(1) 新 建 一 个 HIML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
(2) 接 下 来 在 div 标记 box_greyc 中 写 入 以 下 代码 : 

<div class= box grey > 

<strong> 蓝 色 心情 许愿 墙 </strong></h3> 


< 法 一 
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<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


</p></div> 
(3) 定义 div 的 CSS 样式 : 包括 div 的 高 度 、 宽 度 、 边 框 的 粗 度 和 颜色 ， 其 代码 如 下 : 


div{ 

height:100px; 
width:400px; 
padding:100px 0 0 0; 
border:lpx solid #666666; 
} 


(4) 把 用 于 定义 滚动 条 的 3D 界面 的 暗 边 颜色 的 CSS 属性 添加 到 步骤 (3) 的 代码 中 ， 这 里 我 
们 通过 overflow 属性 设置 滚动 条 始终 显示 ， 其 代码 如 下 : 


div .box grey 

1 

height:200px; 

overflow:scroll; 
scrollbar-shadow-color:#FF0000; 
} 


10.5.4 ”运行 结果 


将 保存 的 名 为 index.html 的 页 面 在 正 浏览 器 中 运行 ,我 们 可 以 看 到 如 图 10-5 所 示 的 红色 
滚动 条 3D 界面 的 暗 边 效果 。 


在 才 个 人 的 心底 ， 者 有 好 美好 的 祝 


10-5 ”突出 的 滚动 条 阴影 效果 
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10.5.5 ”实例 分 析 


应 源码 解析 : 


在 本 实例 中 我 们 使 用 scrollbar-shadow-color 属性 来 设置 滚动 条 3D 界面 的 暗 边 颜 色 。 


10.6 ”制作 彩色 滚动 条 暗 边 框 


滚动 条 暗 边 框 也 就 是 滚动 条 3D 界面 暗 边 的 阴影 部 分 ， 指 右 侧 滚 动 条 中 显示 在 滚动 条 隐隐 
邻 的 左 侧 和 顶部 区 域 。 我 们 可 以 使 用 CSS 样式 中 的 滚动 条 颜色 属性 scrollbar-darkshadow-color 
来 设置 它 的 颜色 。 


上 视频 教学 : 光盘 /视频 /10/10.6 制作 彩色 滚动 条 暗 边框 .avi @O 度 : 4 分 名 


10.6.1 基础 知识 一 一 scrollbar-darkshadow-color 


scrollbar-darkshadow-color 是 CSS 样式 中 设置 滚动 条 暗 边 颜 色 的 属性 。 通 过 这 个 属性 可 以 
在 页 面 中 的 滚动 条 中 设置 滚动 条 暗 边 的 颜色 。 

语法 格式 如 下 : 

scrollbar-darkshadow-color:color; 

我 们 通过 一 个 实例 ， 来 具体 地 学 习 这 个 语法 的 使 用 ， 其 代码 如 下 : 

div 

{ 

height:100px; 

width:400px; 

overflow:scroll; 


scrollbar-darkshadow-color:#00F; 


} 
在 以 上 代码 中 ， 首 先 使 用 overflow 属性 设置 在 div 中 始终 显示 滚动 条 ， 然 后 通过 
scrollbar-darkshadow-color 属性 来 设置 滚动 条 暗 边 颜色 的 CSS 样式 为 蓝 色 (#00F) 


”滚动 条 暗 边 ， 实 际 上 就 是 3D 滚动 条 的 阴影 部 分 的 颜色 。 请 大 家 不 要 将 其 与 3D 界 
提示 面 的 瞳 边 相 混淆 。 


10.6.2 ”实例 描述 


在 设计 页 面 时 ， 有 时 会 需要 滚动 条 ， 但 滚动 条 中 的 3D 界面 的 暗 边 ， 常 常会 被 我 们 忽视 ， 
而 和 暗 边 非常 相近 的 暗 边框 则 更 是 不 会 引起 注意 。 但 在 网 页 中 ,确实 有 时 需要 用 到 深 动 条 暗 边 


< 人 mm 


框 ， 我 们 可 以 使 用 CSS 样式 中 滚动 条 的 scrollbar-darkshadow-color 属性 来 设置 适合 的 颜色 ， 以 
突出 页 面 的 效果 。 


10.6.3 ”实例 应 用 


【 例 10-6】 制 作 彩 色 滚 动 条 暗 边框 
(1) 新 建 一 个 HIML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
(2) 接 下 来 在 div 标记 box_greyc 中 写 入 以 下 代码 : 
<div class= box grey > 
<strong> 蓝 色 心 情 许 愿 墙 </ strong></h3> 
<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 


都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 

让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哆 。<br /> 


</p></div> 
(3) 定义 div 的 CSS 样式 : 包括 div 的 高 度 、 滚 动 条 暗 边 颜色 等 ， 其 代码 如 下 : 
div .box grey 
{ 
height:200px; 
overflow:scroll; 


scrollbar-darkshadow-color:#F00; 


} 


10.6.4 ”运行 结果 


在 正 浏 览 器 中 运行 名 为 index.html 的 网 页 ， 可 以 看 到 如 图 10-6 所 示 中 蓝 色 方 框 的 效果 。 


图 10-6 设置 暗 边框 颜色 的 实例 运行 效果 
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10.6.5 ”实例 分 析 


名 源码 解析 : 


在 本 实例 中 我 们 使 用 scrollbar-darkshadow-color 属性 来 设置 滚动 条 的 暗 边框 颜色 。 


10.7 制作 滚动 条 基准 色 


网 页 中 的 滚动 条 是 由 3D 界面 亮 边框 、3D 表面 、3D 界面 的 暗 边 、 方 向 箭头 、 暗 边框 和 拖 
动 区 域 组 成 的 。 在 CSS 样式 中 ， 每 一 个 部 分 都 有 一 种 颜色 属性 设置 。 我 们 还 可 以 通过 一 种 属 
性 来 设置 它们 的 基准 颜色 ， 然 后 在 此 基础 上 增加 额外 的 颜色 设置 ， 这 种 属性 就 是 滚动 条 基准 颜 
色 属 性 scrollbar-base-color。 


E 视频 教学 : 光盘 /视频 /10/10.7 制作 滚动 条 基准 色 avi 人 基诺 :5 分 钟 


10.7.1 ”基础 知识 一 一 scrollbar-base-color 


scrollbar-base-color 属性 是 设置 滚动 条 的 基准 颜色 。 这 种 基准 颜色 是 滚动 条 的 背景 颜色 , 我 
们 还 可 以 在 此 基础 上 使 用 其 他 属性 。 

使 用 语法 如 下 : 

scrollbar-base-color:color; 


例如 ， 在 层 中 使 用 scrollbar-base-color 属性 设置 滚动 条 基准 颜色 为 蓝 色 ， 其 CSS 样式 代码 
如 下 : 
Qivi 
overflow:scroll; 
scrollbar-base-color: #F00; 
height: 100px; 
width: 200px; 
} 


滚动 条 的 基准 颜色 只 是 滚动 条 的 基本 颜色 ， 在 使 用 scrollbar-base-color 属性 设置 
的 同时 ， 其 他 的 滚动 条 颜色 设置 属性 可 以 同时 使 用 。 
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10.7.2 ”实例 描述 


在 设计 页 面 时 ， 我 们 经 常会 在 页 面 中 设置 其 背景 颜色 ， 也 就 是 通常 所 说 的 基准 颜色 。 在 此 
基础 上 进行 的 页 面 设计 ， 会 使 页 面 更 加 美观 。 而 我 们 在 使 用 滚动 条 时 也 会 用 到 这 种 基准 颜色 的 
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mm > 


设置 。 下 面 我 们 来 做 一 个 设置 滚动 条 基准 颜色 的 实例 吧 。 


10.7.3 ”实例 应 用 


【 例 10-7】 制 作 滚 动 条 基准 色 
(1) 新 建 一 个 HTML 页 面 ， 并 进行 布局 ， 保 存 为 index.html。 
(2) 接 下 来 在 div 标记 box_greyc 中 写 入 以 下 代码 : 
<div class= box grey > 
<strong> 蓝 色 心 情 许愿 墙 </strong></h3> 
<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 
让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


</p></div> 
(3) 定义 div 的 CSS 样式 : 包括 div 的 高 度 、 滚 动 条 的 基准 颜色 样式 为 红色 、 滚 动 条 3D 表 
面 颜色 样式 为 灰色 等 ， 在 这 里 使 用 overflow 设置 滚动 条 始终 显示 ， 其 代码 如 下 : 
div .box grey{ 
height:200px; 
overflow:scroll; 


scrollbar-face-color:#CCC; 
scrollbar-base-color: #F00; 


10.7.4 运行 结果 


在 下 浏览 器 中 运行 名 为 index.html 的 页 面 ， 可 以 看 到 如 图 10-7 所 示 的 效果 ， 其 中 滚动 条 
的 基准 颜色 为 红色 。 


10-7 ”设置 滚动 条 基准 颜色 的 实例 运行 效果 
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10.7.5 实例 分 析 


名 源码 解析 : 


在 本 实例 中 ， 我 们 使 用 scrollbar-base-color 属性 将 滚动 条 的 基准 颜色 设置 为 红色 ， 然 后 又 
设置 滚动 条 3D 表面 的 颜色 为 灰色 ， 由 此 可 见 滚 动 条 的 颜色 属性 可 以 同时 使 用 。 


10.8 制作 彩色 滚动 条 拖 动 区 域 


滚动 条 拖 动 区 是 指 右 侧 滚 动 条 中 可 以 使 用 鼠标 进行 上 下 拖 动 的 区 域 的 背景 部 分 。 在 这 部 分 
中 ， 我 们 可 以 通过 CSS 样式 中 的 滚动 条 颜色 属性 scrollbar-track-color 来 对 其 颜色 进行 修饰 。 


ES 视频 教学 :光盘 /视频 /10/10.8 ”制作 彩色 滚动 条 拖 动 区 域 avi 国度: 4 分 名 


10.8.1 基础 知识 一 一 scrollbar-track-color 


scrollbar-track-color 是 CSS 样式 中 滚动 条 的 颜色 设置 属性 ， 不 过 这 个 属性 只 用 来 设置 滚动 
条 拖 动 区 域 的 颜色 ， 即 滚动 条 滑 块 下 的 区 域 的 颜色 。 

语法 格式 如 下 : 

scrollbar-track-color:color; 


在 使 用 的 时 候 ， 我 们 可 以 在 CSS 样式 中 使 用 这 个 属性 ， 例 如 把 滚动 条 的 拖 动 区 域 的 颜色 
设置 为 蓝 色 ， 其 代码 如 下 : 
div{ 
overflow: scroll; 
scrollbar-track-color: #00F; 
} 
在 以 上 代码 中 ， 我 们 首先 使 用 overflow 属性 设置 在 div 里 始终 显示 滚动 条 ， 然 后 通过 
scrollbar-track-color 属性 来 设置 滚动 条 暗 边 颜色 的 CSS 样式 为 蓝 色 (#00F)。 


scrollbar-track-color 属性 的 设置 不 仅仅 限于 div 中 , 在 HTML 标记 中 使 用 该 属性 可 
二 未 | 。 以 使 整个 页 面 的 滚动 条 的 扼 动 区 域 颜 色 一 致 


10.8.2 ”实例 描述 
大 家 都 以 为 滚动 条 在 页 面 中 存在 是 最 平常 的 事情 了 ， 但 在 一 些 高 质量 的 页 面 中 ， 如 含有 图 


片 较 多 的 页 面 中 使 用 的 就 更 频繁 。 为 了 达到 和 页 面 很 好 地 契合 , 我们 往往 会 在 滚动 条 上 添加 一 
些 修饰 ， 如 改变 拖 动 区 域 的 颜色 。 要 改变 拖 动 区 域 的 颜色 ， 可 以 使 用 CSS 样式 中 滚动 条 的 
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scrollbar-track-color 来 设置 ， 下 面 就 让 我 们 实现 一 个 实例 ， 来 看 看 效果 吧 。 


10.8.3 ”实例 应 用 


【 例 10-8】 制 作 彩 色 滚动 条 拖 动 区 域 
(1) 新 建 一 个 HTML 页 面 ， 并 进行 布局 ， 保 存 为 ndex.html。 
(2) 接 下 来 在 div 标记 box_greyc 中 写 入 如 下 代码 : 
<div class= box grey > 
<strong> 蓝 色 心 情 许 愿 墙 </ strong></h3> 
<p> 开 夜 的 天 窗 , 对 着 划 过 的 流星 许 下 永恒 的 祝愿 , 不 变 的 诺言 。 在 每 个 人 的 心底 ， 
都 有 最 美好 的 祝愿 。 或 许 ， 这 就 是 一 种 缘 份 。<br /> 
<br /> 
让 我 们 用 最 虔诚 的 心 ， 在 这 里 许 下 您 的 心愿 、 祝 福 ， 留 下 您 最 想 对 他 (她 ) 说 的 话 ， 
永久 地 挂 在 许愿 墙 上 ， 愿 望 就 会 很 快 实现 的 哟 。<br /> 


</p></div> 
(3) 定义 div 的 CSS 样式 : 包括 高 度 、 滚 动 条 的 拖 动 区 域 的 颜色 等 , 这 里 我 们 使 用 overflow 
属性 定义 层 中 的 滚动 条 始终 显示 ， 其 代码 如 下 : 
div .box grey{ 
height:200px; 
overflow:scroll; 
scrollbar-face-color:#CCC; 


scrollbar-track-color:#F00; 


} 


10.8.4 ”运行 结果 


将 名 为 index.html 的 页 面 在 正 浏览 器 中 运行 ， 可 以 看 到 如 图 10-8 所 示 的 效果 ， 其 中 的 红 
色 部 分 就 是 滚动 条 拖 动 区 域 的 颜色 。 
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10-8 设置 拖 动 区 域 颜色 的 实例 运行 效果 
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10.8.5 “实例 分 析 


6 源码 解析 : 


在 本 实例 中 ,我 们 使 用 滚动 条 颜色 属性 scrollbar-track-color 设置 了 滚动 条 拖 动 区 域 的 颜色 ， 
这 里 只 是 使 用 了 基本 设置 。 根 据 需 要 我 们 还 可 以 使 用 滚动 条 颜色 属性 的 综合 设置 。 


10.9 ”常见 问题 解答 


10.9.1 滚动 条 颜色 控制 失效 


在 XHTML 页 面 中 滚动 条 颜色 CSS 控制 失效 问题 。 
网 络 课堂 : http://bbs.itzen.com/thread-12420-1-1.html 


下 面 的 代码 为 什么 在 HIML 中 能 够 显示 ， 而 在 XHTML 中 会 失效 呢 ? 


body{ 

scrollbar-3dlight-color:#D4D0C8; /*- 最 外 左 -*/ 
scrollbar-highlight-color:#fff; /*- 左 二 -*/ 
scrollbar-face-color:#E4E4E4; Wj 
scrollbar-arrow-color:#666; | 
scrollbar-shadow-color:#808080; We 
scrollbar-darkshadow-color:#D7DCE0; /*- 右 一 -*/ 
scrollbar-base-color:#D7DCEO; /*- 基色 -*/ 
scrollbar-track-color:#; /*= 清道 =*/ 


} 

【解决 办 法 】 在 XHTML 中 body 不 是 根 元 素 ， 只 有 html 是 根 元 素 ， 而 页 面 的 滚动 条 也 
是 属于 根 元 素 的 ， 所 以 定义 body 没有 效果 的 原因 是 我 们 只 定义 了 一 个 子 元 素 ， 把 body 换 成 * 
或 者 xhtml 就 可 以 了 。 


10.9.2 ”滚动 条 滑 块 的 问题 


CSS 中 关于 滚动 条 滑 块 的 问题 。 
网 络 课堂 : http://bbs.itzen.com/thread-12421-1-1.html 


各 位 ， 我 就 问 个 简单 的 滑 块 问题 ， 我 在 HTML 代码 中 设置 body 元 素 样式 如 下 : 


body{overflow:scroll;background-image:url('image.jpg');} 
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里 面 的 那个 image.jpg 是 一 个 比 桌 面 大 的 图 片 。 结 果 在 浏览 器 中 运行 ， 滚 动 条 是 有 了 ， 而 
滑 块 没有 。 后 来 把 样式 应 用 到 body 中 的 一 个 div 元 素 上 ， 结 果 还 是 这 个 效果 。 是 不 是 我 有 什 
么 属性 没 设置 ? 

【解决 办 法 】 首 先 overflow:scoll 表达 的 意思 是 当 页 面 内 容 超出 一 屏 (或 者 给 body 设置 的 宽 
度 ) 时 ， 需 要 显示 滚动 条 。 当 没有 超出 时 ， 只 显示 和 和 了 的 轴 。 问 题 在 于 背景 图 片 不 能 设置 大 
小 。HTML 不 会 计算 出 背景 图 片 的 大 小 ， 这 与 直接 插入 的 图 片 是 有 区 别 的 。 

我 们 分 两 步 解 决 这 个 问题 ， 第 一 步 把 body 的 宽度 和 高 度 与 图 片 真实 大 小 设置 为 一 致 ， 第 
二 步 给 div 设置 的 宽度 和 高 度 与 图 片 一 致 即 可 。 


10.10 习 题 


1. 填空 题 
(1) 在 滚动 条 颜色 属性 中 ， 使 用 设置 滚动 条 3D 表面 的 颜色 。 
2 属性 是 用 来 改变 滚动 条 拖 动 区 域 颜色 的 。 
(3) 属性 是 设置 滚动 条 方向 箭头 的 颜色 的 。 
2. 选择 题 
(1) 要 实现 滚动 条 亮 边 框 颜色 效果 ， 使 用 属性 。 

A. scrollbar-face-color B. scrollbar-darkshadow-color 
. scrollbar-highlight-color D. scrollbar-track-color 

属性 实现 滚动 条 3D 界面 的 暗 边 颜色 效果 。 

. scrollbar-highlight-color B. scrollbar-track-color 


(2) 


. scrollbar-shadow-color D. scrollbar-face-color 
属性 实现 设置 滚动 条 的 基准 颜色 效果 。 


. scrollbar-track-color B. scrollbar-base-color 


(3) 


A>HNnPnn 


. scrollbar-face-color D. scrollbar-darkshadow-color 


3. 上 机 练习 


上 机 练习 : 使 用 Dreamweaver 创建 一 个 简单 的 HTML 页 面 ， 其 中 要 用 到 CSS 滚动 条 颜 
色 属性 。 

通过 本 章 的 学 习 ， 我 们 已 经 掌握 了 CSS 中 滚动 条 颜色 属性 的 使 用 方法 ， 在 本 章 的 上 机 练 
习 中 ， 要 求 读者 熟练 使 用 这 些 属性 ， 来 实现 如 图 10-9 所 示 的 彩色 滚动 条 效果 。 
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开 珊 隐 到 加 。 对 看 志 过 的 这 呈 许 下 永 便 世 祝愿， 不 殉 攻 语言 。 在 乞 个 人 的 心计 ， 部 有 时 半 好 的 视 
压 。 或 许 ， 这 放 是 一 各 隶 从 。 


直 我 们 用 昌 放 访 的 心 ， 在 这 蛙 计 下 仿 和 心愿、 祝福 ， 奋 下 作 划 相对 地 ( 灼 ) 说 交 话 ， 永 入 地 挂 在 
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图 10-9 ”彩色 滚动 条 的 效果 
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第 11 章 ” 统 挠 全 局 一 一 页 面 的 定位 


与 布局 


内 容 摘要 : 

在 设计 网 页 时 ， 能 否 控 制 好 各 个 模块 在 页 面 中 的 位 置 是 非常 关键 的 。 

以 前 很 多 人 喜欢 用 表格 来 控制 页 面 的 布局 ， 因 为 这 种 方法 简单 、 容 易 实 现 。 但 是 它 的 缺点 
也 不 少 : 页 面 混乱 、 代 码 宛 长 、 加 载 很 慢 、 不 易 搜 索引 营 收 录 等 。 

后 来 , 逐渐 开始 流行 使 用 div+CSS 来 控制 布局 的 方式 。 当然, 使 用 div+CSS 控制 布局 的 方 
式 克服 了 使 用 表格 来 控制 布局 的 诸多 浆 端 ， 所 以 成 为 多 数 人 选择 的 页 面 布 局 方式 。 

本 章 首 先 介绍 什么 是 盒子 模型 ,然后 讲解 控制 页 面 元 素 的 定位 方式 、 层 登 顺序 和 元 素 位 置 ， 
接着 讲解 如 何 使 用 CSS 控制 div 对 页 面 进行 布局 ， 最 后 讲解 如 何 使 用 CSS 控制 页 面 元 素 制作 
一 些 特定 效果 。 

学 习 目标 : 

了 解 什么 是 盒子 模型 

掌握 元 素 定位 的 方法 

掌握 div 布局 的 方法 

掌握 使 用 CSS 样式 显示 一 个 页 面 元 素 的 局 部 内 容 
掌握 对 页 面容 器 内 容 溢 出 的 处 理 方法 

掌握 页 面 元 素 的 显示 方式 


会 . 开发 学 习 实录 .条 


11.1 盒子 模型 


在 前 面 的 章节 中 我 们 已 经 简单 地 提 到 介绍 过 盒子 模型 ， 下 面 我 们 来 详细 了 解 一 下 什么 是 盒 


子 模型 。 
刚 听 到 盒子 模型 (Box Model) 的 时 候 ， 每 个 人 都 会 觉得 很 困惑 。 这 的 确 是 一 个 有 点 抽象 的 
名 词 。 


我 们 生活 中 的 盒子 ， 一 般 来 说 都 是 一 个 个 的 三 维 容器 。 最 常见 的 就 是 文具 盒 、 礼 品 盒 、 储 
物 箱 等 。 这 些 东西 通常 是 一 个 具有 长 、 宽 、 高 等 描述 大 小 属性 的 立方 体 ， 我 们 可 以 用 它 来 存放 
东西 。 

Web 页 面 中 的 “盒子 ”和 现实 中 的 “盒子 ”作用 一 样 ， 都 是 为 了 存放 东西 ， 或 者 称 之 为 
容器 。 
现实 世界 是 一 个 三 维 的 世界 ， 而 电脑 显示 器 为 我 们 展示 的 是 一 个 二 维 画面 ， 无 论 它 怎样 去 
模仿 三 维 效果 (3D)， 都 不 可 能 摆脱 二 维 画 面 的 本 质 。 在 Web 页 面 中 ， 更 是 如 此 。 

所 以 我 们 不 得 不 面 对 一 个 事实 ，Web 页 面 中 的 盒子 将 是 一 个 平面 的 “盒子 ”。 从 这 里 或 许 
就 开始 有 点 抽象 了 。 不 过 我 们 先 接受 一 个 事实 : 平面 “盒子 ”没有 “高 ”这 个 属性 ， 所 以 页 面 
中 的 几乎 所 有 对 象 对 于 大 小 属性 的 描述 最 多 有 长 和 宽 两 个 方向 的 选项 。 而 页 面 中 的 内 容 归 根 结 
底 是 为 了 显示 给 我 们 看 的 ， 我 们 人 的 眼睛 接收 到 的 都 是 图 像 信息 ， 包 括 Web 页 面 中 的 图 像 、 
文字 、 动 画 、 视 频 等 。 

$ 这 些 页 面 中 的 图 像 、 文 字 、 动 画 、 视 频 才 是 我 们 需要 为 用 户 传 递 的 信息 ， 也 就 是 
注意 Web 页 面 最 终 要 处 理 的 对 象 。 

这 些 Web 页 面 中 的 图 像 、 文 字 、 动 画 、 视 频 在 计算 机 中 都 是 以 一 个 具有 长 、 宽 属性 的 方 
块 呈 现 的 ， 而 页 面 布局 就 是 为 了 更 合理 地 摆 放 这 些 东西 。 所 以 我 们 要 讲 的 “盒子 ”就 是 为 了 存 
放 这 些 东 西 ， 并 将 这 些 东西 呈现 在 页 面 中 的 适当 位 置 。 

举 一 个 例子 。 假 如 你 是 一 个 仓库 管理 员 ， 老 板 给 你 一 大 堆 东西 (假设 有 书籍 等 过 潮湿 易 损 
毁 的 东西 ， 有 玻璃 制品 等 怕 碰 怕 摔 的 东西 ……)， 让 你 把 这 些 东西 放 到 整个 仓库 中 去 ， 而 仓库 
是 一 个 破旧 地 下 室 (我 们 知道 一 般 地 下 室 都 比较 容易 受潮 )。 

这 时 我 们 就 不 得 不 考虑 以 下 几 个 因素 : 为 了 易于 搬运 ， 我 们 需要 选择 足够 厚度 、 足 够 结实 
的 箱子 存放 ， 因 为 书籍 等 怕 潮 湿 ， 我 们 必须 保证 其 离 墙壁 有 一 段 距离 (当然 通风 是 必需 的 )， 玻 
璃 制品 怕 碰 ， 我 们 需要 在 箱子 里 垫上 足够 厚度 的 保护 层 。 

整个 规划 中 主要 体现 出 了 以 下 几 点 : 盛装 物品 的 “盒子 ”的 厚度 、“ 盒 子 ” 与 墙壁 (其 他 
物体 ) 的 距离 和 盒子 内 部 填充 物 (保护 层 ) 的 厚度 。 

到 此 为 止 ， 我 们 知道 了 如 何 使 用 “盒子 ”存放 物品 。 

同样 ， 在 Web 页 面 中 的 “盒子 ”也 是 同样 的 结构 : 厚度 、 边 距 (边缘 与 其 他 物体 的 距离 )、 
填充 (填充 厚度 )。 引 申 到 CSS 中 ， 就 是 border、margin 和 padding。 当 然 ， 不 能 少 了 内 容 。 也 
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就 是 说 整个 盒子 在 页 面 中 占 的 位 置 大 小 ,应 该 是 内 容 的 大 小 加 上 填充 的 厚度 ， 再 加 上 边框 的 厚 
度 ， 还 要 加 上 它 的 边 距 。 盒 子 模 型 如 图 11-1 所 示 。 


图 11-1 盒子 模型 示意 图 


我 们 需要 牢记 的 是 ， 现 实生 活 中 我 们 使 用 盒子 是 为 了 包装 和 保护 物品 ， 而 在 Web 
坦 示 | 。 页 面 中 使 用 念 子 ， 完 全 是 为 了 美观 。 所 以 理解 “ 念 子 模型 ”的 时 候 一 定 要 注意 ， 
因为 HTML 页 面 是 一 个 层级 的 “ 树 ”， 所 以 盒子 的 嵌 套 使 用 是 很 正常 的 ， 就 像 平 时 我 们 
使 用 盒子 分 门 别 类 地 存放 东西 ， 最 后 放 到 一 个 大 箱子 里 一 样 。 

总 体 来 说 ， 使 用 “盒子 模型 ”这 个 名 称 还 是 非常 形象 的 。 它 和 现实 中 的 盒子 非常 相似 。 如 
果 你 能 把 现实 世界 中 的 三 维 的 盒子 抽象 到 二 维 平面 中 ， 也 就 理解 什么 是 “盒子 模型 ”了 。 


11.2 具有 固定 位 置 的 广告 框 


很 多 网 站 通常 会 在 页 面 中 放置 一 些 广告 框 。 如 果 将 广告 作为 页 面 模 块 就 会 显得 不 够 醒目 ， 
广告 效果 也 不 明显 ， 所 以 很 多 站 长 喜欢 把 广告 做 成 一 些 页 面 的 侧 边 栏 一 直 悬 停 在 页 面 边 上 ， 这 
样 既 可 以 弥补 页 面 的 空白 ， 也 可 以 使 广告 更 加 醒目 。 

大 家 通常 使 用 JavaScript 控制 广告 模块 的 位 置 ， 这 种 方法 有 一 种 拖 搜 的 延迟 效果 。 

其 实 还 可 以 使 用 CSS 定位 的 方法 ， 使 广告 框 固定 在 浏览 器 窗口 中 的 某 一 个 位 置 。 这 样 浏 
览 器 中 页 面 滚动 的 时 候 广告 似乎 和 窗口 是 浑然 一 体 的 ， 完 全 不 会 晃动 。 


上 视频 教学 : 光盘 /视频 /11/ 11.2 具有 固定 位 置 的 广告 框 .avi @ 长 度 ; 6 分 名 


11.2.1 基础 知识 一 一 定位 方式 和 位 置 

将 页 面容 器 定位 在 浏览 器 窗口 中 的 固定 位 置 需要 设置 两 个 CSS 属性 : 定位 方式 position 和 
相应 的 元 素 位 置 。 

1. 定位 方式 position 属性 

position 属性 是 声明 元 素 的 定位 方式 ， 其 语法 如 下 : 


position : static | absolute | fixed | relative 
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从 其 语法 格式 的 定义 可 以 知道 , 它 有 4 个 可 选 值 , 分别 代 表 4 种 定位 方式 。 具体 说 明 如 下 。 

@ static: 静态 的 ， 无 特殊 定位 。 对 象 遵 循 HTML 文档 的 定位 规则 。 该 项 是 默认 值 。 

@ ”absolute: 绝对 定位 。 将 对 象 从 文档 流 中 拖 出 ， 将 该 对 象 相 对 于 其 最 接近 的 一 个 具有 
定位 设置 的 父 对 象 进行 绝对 定位 。 如 果 不 存在 这 样 的 父 对 象 ， 则 依据 body 对 象 进行 
定位 。 

@ fixed: 固定 定位 。 它 可 以 使 元 素 对 象 脱离 文档 流 固 定 在 浏览 器 的 某 个 位 置 。 

@ relative: 相对 定位 。 它 可 以 使 用 CSS 样式 中 的 位 置 属性 使 元 素 对 象 在 正常 的 文档 流 


中 偏 移 位 置 。 
注意 fixed 值 在 一 些 早期 版 本 的 浏览 器 (如 IE6) 中 并 不 提供 对 它 的 支持 。 
2. 元 素 位 置 


元 素 的 位 置 属 性 可 以 配合 元 素 的 定位 方式 实现 对 页 面 元 素 位 置 的 指定 。 该 属性 由 4 个 属性 
构成 : top、right、bottom、left， 分 别 用 于 设置 元 素 与 顶部 、 右 侧 、 下 部 、 左 侧 的 距离 。 
比如 要 将 某 个 id 为 ad 的 元 素 固 定 到 页 面 右 下 角 ， 可 以 使 用 如 下 代码 : 
#ad { 
position:fixed; 
rights0Or 
bottom:0; 
} 


11.2.2 ”实例 描述 


窗 内 网 应 广大 网 友 要 求 ， 建 立 了 几 个 技术 讨论 群 。 在 这 些 QQ 群 里 ， 大 家 可 以 实时 地 提出 
一 些 问 题 ， 供 大 家 进行 讨论 。 

初期 为 了 让 大 家 尽快 加 入 这 些 群 ， 能 够 进行 技术 讨论 ， 需 要 将 这 几 个 群 的 号 码 放 在 窗 内 网 
首页 进行 公布 。 当 然 ， 最 好 的 方法 就 是 使 用 浏览 器 中 固定 不 动 的 广告 框 来 提示 站 点 的 浏览 者 。 

下 面 我 们 就 在 窗 内 网 首页 的 右 下 角 添加 一 个 显示 QQ 群 号 码 的 提示 框 。 


11.2.3 ”实例 应 用 


【 例 11-1】 具 有 固定 位 置 的 广告 框 

(1) 在 Dreamweaver 中 创建 一 个 站 点 ， 指 定 本 地 硬盘 上 的 一 个 目录 。 
(2) 在 站 点 中 添加 一 个 imgs 文件 夹 和 一 个 css 文件 夹 。 
(3) 在 css 目录 中 创建 一 个 CSS 样式 表 文 件 ， 命 名 为 position.css。 
(4) 修改 position.css 文件 ， 添 加 样式 表 代 码 ， 如 下 所 示 : 


echarset "utf-8"? 
/* CSS Document */ 
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#ad { 
background-image:url(../imgs/ad bg.gif); 
height:126px; 
width:211px; 
bottom:0; 
right:0; 
position:fixed; 
padding: 9px; 
font-family: "宋体 "，Arial; 


#ad span { 
margin:0 0 0 1l5px; 
font-size:14px; 
font-weight:700; 
Color:#FFF; 


#ad ul li { 
Color:#FFF; 
font-size:12px; 
padding:S5px; 


(5) 在 站 点 根 目录 中 添加 一 个 名 为 position.html 的 Web 页 面 文件 。 
(6) 打开 position 文件 ， 在 head 部 分 引入 刚才 创建 的 CSS 样式 表 文 件 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="css/position.css"/> 
(7) 在 页 面 body 部 分 添加 显示 QQ 群 号 信息 的 页 面 元 素 ， 代 码 如 下 : 


<div id="ad"> 
<span> 窗 内 QQ 群 号 </span> 
<ul> 
<1li>oo 群 1: 33925615</1i> 
<1li>oo 群 2: 45368980</1i> 
<1li>QQ 群 3: 107423140</1i> 
<1i>Qo 和 群 4: 7858178</1i> 
</ul> 
</div> 


11.2.4 ”运行 结果 


在 正 浏 览 器 中 运行 position.html 页 面 ， 结 果 如 图 11-2 所 示 。 


< 洛 一 - 


11-2 国定 位 置 广 告 框 运行 结果 


11.2.5 ”实例 分 析 


区 


本 实例 定义 了 一 个 描述 广告 框 样式 的 样式 表 。 

首先 设置 广告 框 ad 的 背景 宽度、 高 度 、 字 体 、 内 填充 ， 以 及 广告 框 的 定位 方式 为 固定 
定位 ， 而 且 广告 框 右边 和 下 边 的 位 置 都 为 0， 即 紧 贴 浏览 器 内 容 框 的 边缘 ， 这 样 该 广告 框 将 始 
终 固定 显示 在 浏览 器 的 右 下 角 。 

然后 样式 表 定 义 了 广告 框 里 的 文本 样式 和 边 距 等 信息 。 


11.3 ”文字 阴影 效果 


文字 阴影 效果 是 文本 效果 中 最 常用 的 效果 之 一 。 

使 用 阴影 效果 文本 的 通常 做 法 是 使 用 图 片 做 成 阴影 效果 引入 页 面 。 这 样 做 非常 不 方便 ， 特 
别 是 在 文本 内 容 蔡 换 的 时 候 我 们 还 需要 手动 处 理 图 片 文 件 。 

其 实 还 可 以 使 用 CSS 样式 表 定 义 一 个 简单 的 文字 阴影 效果 ， 下 面 我 们 来 学 习 这 种 方法 。 


上 视频 教学 : 光盘 /视频 /11/11.3 文字 阴影 效果 .avi @k 度 : 1 分钟 
11.3.1 基础 知识 一 一 z-index 属性 


CSS 样式 定义 的 阴影 效果 其 实 是 重合 着 的 两 行文 字 ， 位 置 稍微 相差 一 点 即 可 实现 阴影 
效果 。 


m2) >> 


重 本 的 文字 需要 将 相同 大 小 的 文字 副本 放置 在 不 同 的 容器 内 部 , 并 同时 将 容器 的 定位 方式 
设置 为 相对 定位 。 这 样 就 可 以 实现 不 同 的 元 素 重合 放置 。 

但 是 ， 哪 个 容器 在 前 面 ， 哪 个 在 后 面 ， 这 个 如 果 控 制 得 不 好 ， 很 可 能 显示 出 来 的 效果 就 大 
不 一 样 。 这 里 就 要 用 到 对 层 谷 容器 层 合 顺序 的 设置 ， 就 是 CSS 中 的 z-index 属性 。 

z-index 属性 可 以 使 用 整数 控制 层 合 元 素 显 示 的 顺序 ， 其 格式 如 下 : 


z-index : auto | number 


该 属性 默认 值 是 auto， 不 过 我 们 可 以 设置 一 个 整数 值 来 控制 显示 层次 。 

在 实际 使 用 时 要 注意 该 参数 的 值 可 以 设置 为 负数 。 如 果 是 负数 ， 容 器 中 的 内 容 将 显 
面 内 容 的 下 面 ， 就 像 水 印 效果 。 

比如 页 面 中 有 一 个 id 属性 值 为 divl 的 div 元 素 ， 我 们 在 样式 表 中 为 其 添加 如 下 的 CSS 样 
式 代码 : 


#divl { 
position:absolute; 
top:60px; 
left:60px; 
background-color:#888; 
width:100px; 
height:100px; 
z-index:1; 


} 

理所当然 , 这 个 div 将 使 用 绝对 定位 的 方式 显示 在 页 面 中 ,其 离 上 边 和 左边 的 距离 都 是 60 
像素 ， 该 div 的 背景 色 为 灰色 ， 宽 度 和 高 度 都 是 100 像素 ， 还 有 最 重要 的 一 点 : 它 的 z-index 
属性 为 1， 说 明 该 元 素 将 显示 在 其 他 元 素 上 面 ， 如 图 11-3 所 示 。 

当然 ， 如 果 将 上 面 代码 中 的 z-index 属性 改 为 负数 ， 比 如 -1， 那 么 这 个 div 将 像 一 个 水 印 
一 样 显示 在 页 面 内 容 的 下 面 ， 如 图 11-4 所 示 。 
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11.3.2 ”实例 描述 


以 前 好 像 在 哪个 国外 的 网 站 上 见 过 使 用 CSS 控制 的 页 面 重 倒 效 果 来 实现 它们 站 点 的 标题 ， 


整体 风格 看 起 来 非常 简洁 、 漂 亮 。 刚才 上 网 找 了 好 久 也 没有 找到 这 个 网 站 ,或 许 是 它 已 经 改版 
了 吧 。 也 许 是 使 用 这 种 方式 比较 生硬 吧 ， 但 对 实现 页 面 局 部 的 效果 确实 是 一 个 不 错 的 方法 。 


下 面 我 们 就 来 简单 演示 一 下 它 的 用 法 。 


11.3.3 ”实例 应 用 


【 例 11-2】 文字 阴影 效果 

(1) 使 用 Dreamweaver 打开 上 一 节 创 建 的 站 点 。 

(2) 新 建 一 个 HTML 页 面 ， 命 名 为 zindex.html。 

(3) 打开 zindex.html 页 面 并 在 页 面 中 添加 如 下 代码 : 


<div id="shadow"> 
<div class="sl">RBC 阴影 文本 </div> 
<div class="s2">ABC 阴影 文本 </div> 
</div> 


(4) 在 css 目录 中 添加 一 个 CSS 样式 表 文 件 ， 命 名 为 zindex.css。 
(5) 编辑 zindex.css 文件 ， 添 加 样式 表 定义 代码 ， 如 下 所 示 : 


@charset "utf-8"; 

body { 
background-image:url(../imgs/zindex bg.jpg) 

} 

#shadow { 
position:relative; 
margin:100px 60px; 
font-size:60px; 
font-weight:900; 
font-family: "宋体 "，Arial; 

} 

#shadow .sl, #shadow .s2 { 
position:absolute; 

} 

#shadow .sl { 
z-index:2; 
tops0r 
Laff Os 
color:#999; 

} 

#shadow .s2 { 
z-index:1; 


top: 3px? 
1eEt:3px 
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color:#555; 


这 里 必须 定义 两 个 重 司 元 素 的 父 元 素 的 定位 方式 ， 否 则 这 两 个 元 素 将 会 脱离 文档 
注意 | 。 流 造成 页 面 混乱 。 
(6) 在 zindex.html 文件 的 head 部 分 使 用 link 关键 字 引 入 该 样式 表 文件 ， 其 代码 如 下 : 


<link rel="stylesheet" type="text/css" href="css/zindex.css"/> 


11.3.4 ”运行 结果 


使 用 下 8 浏览 器 打开 zindex.html 页 面 ， 运 行 结果 如 图 11-5 所 示 。 
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图 11-5 阴影 文本 运行 效果 


11.3.5 ”实例 分 析 


a 


本 实例 在 页 面 中 放置 了 两 个 文本 内 容 一 样 的 div 元 素 ，class 属性 分 别 为 sl 和 s2， 用 于 分 
别 设置 颜色 ， 并 将 其 设置 成 重合 阴影 效果 。 

接 下 来 在 样式 表 中 定义 文本 样式 ， 并 设置 两 个 div 显示 方式 为 绝对 定位 ， 实 现 重合 效果 ， 
并 分 别 定位 两 个 div 元 素 的 层 司 顺序 、 位 置 和 文本 磊 色 ,实现 元 素 的 错位 显示 ,实现 阴影 效果 。 


11.4 文字 环绕 的 图 片 


在 网 页 布局 中 总 会 遇 到 一 些 横向 布局 的 案例 ， 两 个 或 多 个 模块 排 成 一 排 显示 在 页 面 中 。 这 
种 效果 如 果 使 用 表格 实现 则 非常 简单 ， 我 们 可 以 把 横 排 的 模块 放 到 一 个 表格 的 一 行 中 即 可 。 
这 里 我 们 不 使 用 表格 ， 而 改 为 div+CSS 的 方式 实现 页 面 中 的 布局 。 我 们 知道 div 在 页 面 中 


< 需 一 


和 开发 学 习 实录 . 


显示 的 是 一 个 占用 整 行 的 框 ， 默 认 情 况 下 每 一 个 div 都 占用 一 行 。 我 们 要 使 多 个 div 呈现 在 一 
行 中 ， 需 要 使 用 CSS 控制 它 的 显示 方式 ， 就 是 这 里 要 讲 的 float 属性 。 


二 视频 教学 : 光盘 /视频 /11/11.4 文字 环绕 的 图 片 .avi 伟 长 度 : 11 分钟 


11.4.1 基础 知识 一 一 浮动 定位 

要 实现 元 素 脱离 文档 流 浮动 定位 需要 设置 该 元 素 的 float 属性 。 但 是 设置 完 Hoat 属性 以 后 
将 会 影响 到 页 面 的 布局 效果 ， 所 以 在 必要 的 时 候 还 需要 使 用 clear 属性 来 清除 元 素 的 浮动 效果 。 

1.float 属性 

要 实现 元 素 的 浮动 定位 需要 设置 该 元 素 CSS 样式 的 float 属性 。float 属性 设置 了 页 面 对 象 
在 页 面 中 是 否 浮动 及 如 何 浮动 。 该 属性 格式 如 下 : 


float : none | left | right 


对 于 该 属性 取 值 的 说 明 如 下 。 
@ none: 对 象 不 浮动 。 该 项 是 默认 值 。 
@ left: 对 象 靠 容 器 左 侧 浮动 。 
@ right: 对 象 靠 容 器 右 侧 浮动 。 
比如 页 面 中 有 这 样 一 段 代码 : 
<div> 
<div idq="divl"> 这 是 divl 里 的 内 容 </div> 
<div id="div2"> 这 是 div2 里 的 内 容 </div> 
</div> 
如 果 要 使 divl 和 div2 在 一 行 中 显示 ， 就 可 以 设置 divl 或 者 它们 两 个 的 浮动 属性 ， 如 下 
所 示 : 
#divi, #div2 { 
float:left; 
} 


名 =” 很 多 情况 下 浮动 到 一 行 的 多 个 容器 是 同一 类 的 项 目 ， 也 经 常 是 循环 遍历 出 来 的 ， 
歧 巨 | 。 所 以 我 们 通常 直接 设置 它们 所 有 项 的 浮动 属性 。 

2. clear 属性 

因为 float 属性 是 将 元 素 移出 文档 流 ， 所 以 在 所 有 内 容 都 浮动 起 来 的 时 候 页 面 内 部 的 容器 
会 认为 自己 已 经 是 空 容器 ， 将 仍然 影响 页 面 的 效果 。 

比如 我 们 修改 上 面 的 页 面 代 码 ， 如 下 所 示 : 


<div id="divn> 
<div id="divl"> 这 是 divl 里 的 内 容 </div> 


<div id="div2"> 这 是 div2 里 的 内 容 </div> 
</div> 


<span> 这 是 span 标签 里 的 内 容 </span> 
然后 为 其 添加 CSS 样式， 代码 如 下 所 示 : 


#div { 
border:solid lpx #ccc; 
} 
#divl, #div2 { 
float:left; 
} 
span { 
font-size:30px; 


} 


第 11 章 统 挠 全 局 


页 面 的 定位 与 布局 国 


这 时 候 我 们 期 望 的 往往 是 divl 和 div2 能 够 成 一 行 显 示 ， 同 时 div 的 灰色 边框 将 它们 括 起 


来 ， 然 后 span 元 素 中 的 文本 在 div 下 面 独占 一 行 地 显示 。 
真是 这 样 的 么 ? 答案 : 不 是 。 
我 们 来 看 运行 效果 ， 如 图 11-6 所 示 。 
et 和 3 pe | 
这 是 dy] 时 的 内 容 这 是 4 ?于 的 上 过 这 是 span 标 签 里 的 内 
容 
11-6 “元素 浮动 的 运行 结果 
要 解决 这 个 问题 ， 我 们 就 要 使 用 另 一 个 CSS 样式 属性 一 一 clear 属性 。 
clear 属性 指定 了 当前 元 素 不 允许 有 浮动 元 素 的 边 。 如 果 该 边 有 浮动 元 素 ， 当 前 对 象 自动 在 
该 边 外 侧 执 行 换行 操作 。 
clear 属性 的 语法 如 下 : 
clear : none | left | right | both 
对 于 该 属性 取 值 的 说 明 如 下 。 


@ none: 允许 两 边 都 有 浮动 对 象 。 该 项 是 默认 值 。 


@ left: 不 允许 左边 有 浮动 对 象 。 
@ iight: 不 允许 右边 有 浮动 对 象 。 
@ ”both: 两 边 都 不 允许 有 浮动 对 象 。 


要 完善 上 面 的 实例 ， 我 们 修改 页 面 代码 ， 如 下 所 示 : 


<div id="div"> 
<div id="div1"> 这 是 div1 里 的 内 容 </div> 
<div id="div2"> 这 是 div2 里 的 内 容 </div> 
<div style="clear:both;"></div> 
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</div> 

<span> 这 是 span 标签 里 的 内 容 </ span> 

我 们 在 div2 元 素 的 后 面 又 添加 了 一 个 元 素 ， 该 元 素 设置 clear 样式 为 both， 说 明 该 元 素 两 
边 (特别 是 左边 ) 都 不 允许 有 浮动 对 象 ， 所 以 它 自己 会 在 div2 后 面 单独 占 一 行 。 这 时 父 容器 要 正 
常 显示 最 后 那个 没有 浮动 的 div, 所 以 页 面 就 会 如 我 们 预料 的 那样 正常 显示 了 , 如 图 11-7 所 示 。 


这 是 dv1 里 的 内 容 这 是 div2 里 的 内 容 


这 是 span 标 签 里 的 内 容 


图 11-7 清除 浮动 以 后 的 页 面 效 果 


这 种 方法 虽然 达到 了 效果 ， 但 是 它 需要 修改 页 面 结构 ， 而 这 一 点 是 CSS 编码 人 员 非 常 不 
愿 做 的 一 件 事 。 本 来 追求 的 就 是 页 面 代码 和 样式 分 离 ， 而 现在 为 了 添加 样式 而 修改 页 面 结构 ， 
怎么 想 都 不 合适 。 其 实 使 用 CSS 样式 表 完 全 可 以 解决 这 个 问题 。 

它 不 是 需要 在 容器 最 后 面 添加 一 个 有 clear 属性 的 元 素 么 ? 我 们 可 以 使 用 CSS 的 content 
属性 配合 :after 伪 类 实现 这 个 功能 。 

首先 把 添加 的 这 一 行 代码 去 掉 : 

<div style="clear:both;"></div> 

然后 在 样式 表 中 为 id 属性 为 div 的 元 素 添加 一 个 :after 伪 类 的 样式 ， 代 码 如 下 : 

#div:after { 

content: "."; 
clear: both; 
visibility: hidden; 

} 

这 段 代 码 在 容器 内 部 最 后 面 添 加 一 个 纯 文本 的 元 素 ， 元素 只 有 一 个 点 。 然 后 为 该 元 素 添加 
一 个 clear 样式 ， 值 为 both。 当 然 ， 该 元 素 是 为 控制 样式 使 用 的 ， 所 以 它 不 能 影响 页 面 文档 的 
内 容 ， 最 后 我 们 还 要 把 它 隐 藏 ， 这 里 使 用 了 visibility 属性 (这 个 属性 稍 后 我 们 会 讲 到 )。 运 行 之 
后 ， 一 样 可 以 让 页 面 如 我 们 预期 的 那样 显示 。 


11.4.2 ”实例 描述 


像 很 多 报纸 上 的 版 块 一 样 ， 一 篇 新 闻 往往 附带 一 张 或 多 张 图 片 ， 这 些 图 片 多 是 对 新 闻 内 容 
的 一 个 说 明 。 为 了 将 适当 的 图 片 放置 到 适当 的 位 置 ， 而 且 既 美观 又 节省 页 面 资源 ， 往 往 会 使 用 
文字 环绕 的 效果 布局 页 面 。 当 然 ， 很 多 网 站 或 博客 也 大 量 使 用 这 种 方式 布局 网 页 。 

环绕 效果 节省 了 页 面 中 大 量 的 空白 ， 使 页 面 显得 更 加 紧凑 。 

下 面 我 们 就 使 用 CSS 控制 页 面 内 容 实现 一 个 文字 环绕 的 图 片 效果 。 
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11.4.3 ”实例 应 用 


【 例 11-3】 文 字 环绕 的 图 片 

(1) 使 用 Dreamweaver 打开 上 一 节 我 们 使 用 过 的 站 点 。 
(2) 新 建 一 个 HTML 文件 ， 命 名 为 float.html。 

(3) 修改 float.html 文件 ， 添 加 如 下 页 面 代码 : 


<div id="content"> 

<img src="imgs/box.jpg" class="box" /> 

<p> ”在 Web 页 面 中 的 “盒子 ”也 是 同样 的 结构 : 厚度 、 边 距 (边缘 与 其 他 物体 的 距离 ) 、 填 充 ( 填 
充 厚 度 ) 。 引 申 到 css 中 ， 就 是 border、 margin 和 padding。 当然 ， 不 能 少 了 内 容 。 也 就 是 说 整个 
盒子 在 页 面 中 占 的 位 置 大 小 应 该 是 内 容 的 大 小 加 上 填充 的 厚度 再 加 上 边框 的 厚度 再 加 上 它 的 边 距 。</P> 

<p> ”在 这 里 我 们 需要 牢记 于 心 的 是 ， 现 实 中 我 们 使 用 盒子 是 为 了 包装 和 保护 物品 ， 而 在 web 页 面 
中 使 用 盒子 ， 完 全 是 为 了 美观 。 所 以 理解 “盒子 模型 ”的 时 候 不 要 对 它 有 什么 “ 敬 且 ”之 心 。 

因为 HTML 页 面 是 一 个 层级 的 “ 树 ”， 所 以 盒子 的 媒 套 使 用 是 很 正常 的 ， 就 像 平 时 我 们 使 用 盒子 分 

门 别 类 地 存放 东西 ， 最 后 放 到 一 个 大 箱子 里 一 样 。</p> 

<p> ”总 体 来 说 ， 使 用 “盒子 模型 ”这 个 名 称 还 是 非常 形象 的 。 它 和 现实 中 的 盒子 非常 相似 。 如 果 
你 能 把 现实 世界 中 的 三 维 的 盒子 抽象 到 二 维 平面 中 ， 你 就 已 经 理解 什么 是 “盒子 模型 ”了 。</p> 


</div> 


(4) 在 css 目录 中 创建 一 个 CSS 文件 ， 命 名 为 box.css。 
(5) 编辑 box.css 文件 ， 添 加 如 下 的 CSS 样式 代码 : 


@charset "utf-8"; 


body { 
background-image:url(../imgs/float bg.gif); 
padding:70px 0 0 50px; 

} 

#content { 
font-size:13px; 
font-family: "宋体 "，Arial; 
color:#666; 
width:550px; 
line-height:21px; 

#content .box { 
float:right; 
width:206px; 
height:146px; 
margin:10px; 


} 
(6) 在 float.html 页 面 的 head 部 分 引入 box.css 文件 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="css/box.css"/> 
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11.4.4 ”运行 结果 


使 用 正 8 浏览 器 打开 float.html 页 面 ， 运 行 结果 如 图 11-8 所 示 。 


11-8 ”文字 环绕 效果 


11.4.5 ”实例 分 析 


6 源码 解析 : 


本 实例 首先 在 容器 div 中 加 入 一 幅 图 片 和 三 段 文 本 ， 然 后 在 CSS 文件 中 设置 页 面 的 背景 
以 及 容器 元 素 的 字体 、 字 号 、 闫 色 、 宽 度 、 行 高 等 样式 ; 以 及 设置 容器 中 图 片 的 宽度 、 高 度 、 
边 距 和 向 右 浮动 的 属性 。 最 终 达 到 图 片 靠 右 侧 浮动 ， 文 字 在 图 片 左 侧 环绕 显示 的 效果 。 


11.5 ”显示 一 个 图 片 的 局 部 


有 时 页 面 中 实现 一 些 特殊 效果 需要 使 一 些 元 素 只 显示 一 部 分 内 容 ， 比 如 放大 镜 效 果 。 
通常 放大 镜 效 果 需 要 在 缩 略 图 中 指定 显示 的 区 域 , 然后 在 页 面 上 浮动 一 个 层 显示 大 图 的 部 
分 内 容 。 这 就 要 用 到 CSS 样式 表 中 的 一 个 属性 一 一 clip。 


入 视频 教学 : 光盘 /视频 /11/11.5 显示 一 个 图 片 的 局 部 .avi 人 其 度 :11 分 钟 
11.5.1 基础 知识 一 一 clip 


显示 一 个 元 素 的 局 部 内 容 需 要 用 到 一 个 非常 实用 的 CSS 样式 属性 : clip。 
clip 属性 可 以 设置 页 面 中 元 素 的 可 视 区 域 ， 区 域外 的 部 分 是 透明 的 。 该 属性 的 语法 如 下 : 
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clip : auto | rect ( number number number number ) 


对 于 该 属性 两 个 可 选 值 的 说 明 如 下 。 
@ auto 对 象 无 剪 切 。 默 认 值 ， 即 显示 元 素 的 所 有 区 域 
@ rect (number number number number) 根据 上 、 右 、 下 、 左 的 顺序 提供 对 象 自 左 上 角 
为 (0, 0) 点 的 坐标 计算 的 4 个 数值 。4 项 中 的 任意 一 项 都 可 以 使 用 auto 替换 ， 即 表示 该 
边 不 进行 裁 切 。 
使 用 该 属性 需要 注意 一 点 ， 只 有 被 设置 元 素 的 position 属性 的 值 为 absolute 时 ，clip 属性 
设置 的 值 才 起 作用 。 


11.5.2 ”实例 描述 


实现 一 个 放大 镜 效果 稍微 有 点 复杂 ， 需 要 使 用 JavaScript 控制 元 素 显示 的 区 域 。 这 里 我 们 
只 是 学 习 clip 属性 的 用 法 , 就 没有 必要 做 得 那么 复杂 。 所 以 这 里 我 们 简单 地 使 用 clip 属性 “ 切 ” 
出 一 个 图 片 的 局 部 内 容 显示 在 页 面 中 。 


11.5.3 ”实例 应 用 


【 例 11-4】 显 示 一 个 图 片 的 局 部 
(1) 使 用 Dreamweaver 打开 11.4 节 中 使 用 的 站 点 。 


(2) 在 imgs 文件 夹 中 准备 一 个 图 片 文件 flower.jpg， 以 备 在 页 面 中 使 用 clip 属性 裁 切 它 。 
完整 的 图 片 如 图 11-9 所 示 。 


~ 


图 11-9 图 片 flower.jpg 
(3) 在 站 点 根 目 录 下 创建 一 个 名 为 clip.html 的 HTML 文件 。 
(4) 在 cliphtml 页 面 中 将 前 面 准备 的 图 片 文件 引入 ， 代 码 如 下 : 


<img src="imgs/flower.jpg" id="flower" /> 


<img src="imgs/flower.jpg" style="margin:20px 0 0 320px; width:260px;" /> 


(5) 在 css 目录 中 添加 一 个 CSS 资源 文件 ， 命 名 为 clip.css， 为 页 面 添加 CSS 样式 ， 代 码 
如 下 : 
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Bcharset "utf-8"™; 


body { 
background-image:url(../imgs/clip bg.jpg) 
} 
#flower { 
position:absolute; 
top:50px; 
left:30px; 
clip:rect (auto 230px 160px 90px) 
} 


(6) 在 clip.html 页 面 的 head 部 分 引入 CSS 文件 ， 代 码 如 下 : 
<link rel="stylesheet" type="text/css" href="css/clip.css"/> 


11.5.4 ”运行 结果 


使 用 IE8 浏览 器 打开 clip.html 页 面 ， 运 行 结果 如 图 11-10 所 示 。 


K | 已] EB;\ZHh\C35\ 第 11 章 定位 与 和 局 \unitll\clip hunl 
室 忆 天 | 荐 cL:p 号 - 回 局 六 -D4 IAVW-: 加- ” 


11-10 clip 属性 效果 


11.5.5 ”实例 分 析 


Br 


本 实例 先 在 站 点 中 准备 一 张 图 片 ， 然 后 在 页 面 中 引入 该 图 片 ， 添 加 ID 属性 为 lower。 接 
下 来 为 页 面 中 元 素 添加 CSS 样式 代码 ， 其 中 设置 页 面 中 flower 元 素 的 定位 样式 为 absolute( 绝 
对 定位 )， 并 设置 其 顶部 位 置 为 50 像素 ， 左 侧 位 置 为 30 像素 ， 最 后 使 用 clip 属性 设置 元 素 的 
可 见 区 域 为 顶部 自动 (无 裁 切 )、 右 侧 到 230 像素 位 置 、 底 部 到 160 像素 位 置 、 左 侧 到 90 像素 的 
位 置 ， 该 范围 以 内 的 为 元 素 可 见 区 域 。 
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11.6 “ 带 滚 动 条 的 页 面 模 块 


页 面 模块 中 的 内 容 往往 大 小 不 固定 ， 比 如 有 时 内 容 多 ， 有 时 内 容 少 ， 所 以 往往 页 面 中 很 难 
控制 模块 的 样式 。 不 过 对 于 这 一 点 ，CSS 也 给 出 了 相当 有 伸缩 性 的 处 理 方式 。 
CSS 专门 提供 了 一 个 处 理 容器 内 容 太 多 而 溢出 的 样式 属性 一 一 overflow。 


已 各 视频 教学 : 光盘 /视频 /11/11.6 带 滚动 条 的 页 面 模块 .avi 加 长 度 : 11 分 钟 


11.6.1 ”基础 知识 一 一 overflow 


overflow 属性 用 于 设置 容器 在 内 容 太 多 而 造成 溢出 的 情况 下 的 行为 。 该 属性 的 语法 如 下 : 
overflow : visible | auto | hidden | scroll 


关于 该 属性 的 值 说 明 如 下 。 
@ visible: 显示 所 有 内 容 。 设 置 该 属性 时 容器 将 随 内 容 增 大 而 变 大 ， 这 样 可 能 会 影响 预 
期 的 页 面 效 果 。 

@ ”auto: 自动 。 当 内 容 超出 显示 区 域 时 为 容器 添加 滚动 条 。 

@ hidden: 不 显示 超出 容器 显示 区 域 的 内 容 。 

@ scroll: 总 是 显示 滚动 条 。 

另外 ，CSS 还 提供 了 两 个 扩展 的 属性 : overflow-x 和 overflow-y。 这 两 个 属性 分 别 用 于 对 义 
方向 (横向 ) 和 立方 向 (纵向 ) 的 溢出 处 理 方式 进行 设置 。 


11.6.2 ”实例 描述 


有 时 候 ， 我 们 在 设计 一 个 Web 页 面 时 会 过 多 地 考虑 页 面 美观 的 问题 ， 而 把 页 面 中 的 某 个 
模块 设计 得 比较 小 。 但 是 也 有 的 时 候 这 个 小 模块 中 需要 放置 较 多 的 内 容 ， 这 样 就 会 造成 一 些 
矛盾 : 如 果 国 定 模块 的 大 小 ， 那 么 内 容 将 不 能 完全 显示 ;而 如 果 显示 出 所 有 的 内 容 ， 那 么 将 会 
影响 页 面 美观 。 

解决 这 个 问题 的 方法 就 是 使 用 滚动 条 : 让 页 面 模块 大 小 固定 ， 让 用 户 使 用 滚动 条 来 翻动 查 
看 模块 里 的 内 容 。 

下 面 我 们 就 来 使 用 滚动 条 在 一 个 比较 小 的 模块 中 显示 一 大 段 文本 内 容 。 


11.6.3 ”实例 应 用 


【 例 11-S】 带 滚动 条 的 页 面 模块 

(1) 使 用 Dreamweaver 打开 11.5 节 使 用 的 站 点 。 

(2) 在 站 点 根 目录 中 新 建 一 个 HTML 页 面 ， 命 名 为 overflow.html。 
(3) 在 页 面 中 添加 页 面 内容 ， 代 码 如 下 : 


< 告 一- 


人 开发 学 习 实录 . 反 


<div id="content"> 

很 多 时 候 我 们 设计 得 非常 漂亮 的 页 面 中 某 个 模块 因为 美观 等 原因 设计 的 比较 小 ， 或 许 是 可 能 觉得 放 
置 的 内 容 不 会 太 多 ， 也 可 能 是 页 面 设 计 者 太 注 重 美观 效果 了 。 所 以 我 们 不 得 不 在 有 限 的 大 小 中 显示 足够 
多 的 内 容 ， 这 个 问题 的 一 个 比较 不 错 的 解决 方案 就 是 设置 滚动 条 。 让 模块 框 大 小 固定 ， 但 是 内 容 可 以 滚 
动 显 示 ， 两 全 其 美 。 


</div> 


(4) 在 css 目录 中 创建 一 个 CSS 样式 表 文件 ， 命 名 为 overflow.css。 
(5) 编辑 overflow.css， 添 加 样式 代码 ， 如 下 所 示 : 


Qcharset "utf-8"; 


body { 
background-image:url(../imgs/overflow bg.jpg) 

} 

#content { 
border:solid lpx #693; 
width:200px; 
height:120px; 
padding:8px; 
margin:160px 0 0 260px; 
font-size:13px; 
font-family: "宋体 "，Arials 
line-height:18px; 
color:#060; 
overflow:auto; 


} 
(6) 在 overflow.html 页 面 的 head 部 分 引入 ess 样式 表 文 件 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="css/overflow.css"/> 
\ 一 /一 
11.6.4 ”运行 结果 


使 用 IE8 浏览 器 打开 overflow.html 页 面 ， 运 行 结果 如 图 11-11 所 示 。 
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图 11-11 overflow 运行 结果 
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11.6.5 ”实例 分 析 


pe 


本 实例 首先 创建 一 个 HTML 页 面 文件 ， 并 添加 页 面 元 素 ， 然 后 再 创建 一 个 样式 表 文件 ， 
为 页 面 中 的 元 素 添加 CSS 样式 。 

在 样式 表 文 件 中 ， 首 先 设 置 页 面 的 背景 ， 然 后 设置 页 面 模块 content 的 边框 、 大 小 、 填 充 、 
边 距 、 字 号 、 字 体 、 行 高 、 颜 色 等 属性 ， 然 后 再 使 用 overflow 属性 将 content 模块 的 溢出 处 理 
方式 设置 为 自动 ， 这 样 在 模块 内 容 溢出 时 将 会 自动 为 模块 添加 滚动 条 。 


11.7，” 横 排 的 列表 元 素 


正常 情况 下 ，HTML 中 列表 的 显示 是 纵向 排列 的 ， 不 过 有 些 时 候 往往 需要 将 它 横 向 排列 ， 
比如 设计 一 个 页 面 的 菜单 。 

虽然 横向 排列 的 页 面 菜 单 可 以 有 多 种 实现 方式 ， 但 是 很 多 人 仍 喜欢 使 用 ul 和 li 元 素来 定 
义 这 个 列表 。 

其 实 实现 使 用 ul 和 1i 元 素 定义 的 列表 横向 显示 也 不 只 有 一 种 方式 ， 不 过 这 里 我 们 只 讲 其 
中 最 简单 的 一 种 一 一 使 用 display 属性 实现 。 


各 视频 教学 : 光盘 /视频 /11/11.7 横 排 的 列表 元 素 .avi 四 长 度 : 4 分 钟 


11.7.1 基础 知识 一 一 display 


display 属性 可 以 设置 页 面 元素 的 显示 方式 。 该 属性 的 语法 如 下 : 

display : block | none | inline | compact | marker | inline-table | list-item 
| run-in | table |table-caption | table-cell | table-column | table-column-group 
| table-footer-group | table-header-group | table-row | table-row-group 
关于 该 属性 的 可 选 值 说 明 如 下 。 

@ block: 块 对 象 。 将 该 元 素 强制 作为 块 对 象 呈现 到 页 面 中 。 

none: 隐藏 对 象 。 设 置 该 项 的 元 素 将 被 隐藏 。 

inline: 内 联 对 象 。 使 用 该 选项 将 从 对 象 中 删除 行 ， 即 多 个 元 素 在 同一 行 中 显示 。 
compact: 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 。 

marker: 指定 内 容 在 容器 对 象 之 前 或 之 后 。 要 使 用 此 参数 ， 对 象 必须 和 :after 及 :before 
伪 元 素 一 起 使 用 。 

inline-table: 将 表格 显示 为 无 前 后 换行 的 内 联 对 象 或 内 联 容器 。 

list-item: 将 块 对 象 指定 为 列表 项 目 。 并 可 以 添加 可 选项 目标 志 。 
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run-in: 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 。 
table: 将 对 象 作 为 块 元 素 级 的 表格 显示 。 
table-caption: 将 对 象 作为 表格 标题 显示 。 
table-cell: 将 对 象 作 为 表格 单元 格 显示 。 
table-column: 将 对 象 作为 表格 列 显示 。 
table-column-group: 将 对 象 作为 表格 列 组 显示 。 
table-footer-group: 将 对 象 作 为 表格 脚注 组 显示 。 
table-header-group: 将 对 象 作为 表格 标题 组 显示 。 
table-row: 将 对 象 作为 表格 行 显示 。 
table-row-group: 将 对 象 作 为 表格 行 组 显示 。 
在 上 面 所 有 属性 值 选项 中 , 我 们 经 常会 使 用 block 将 一 个 span 元 素 呈现 为 块 对 象 , 或 者 使 
用 none 将 元 素 直 接 隐 藏 …… 
不 过 本 节 我 们 要 将 一 个 列表 中 的 所 有 项 显示 到 一 行 中 ， 就 可 以 使 用 inline 项 来 实现 这 个 效 
果 。 代 码 如 下 : 


wm 
display:inline; 


} 


11.7.2 ”实例 描述 


横向 的 列表 元 素 效果 经 常用 于 设计 页 面 菜 单条 。 确实， 使 用 这 种 方式 设计 出 来 的 菜单 条 结 
构 比 较 清晰 ， 更 容易 阅读 和 维护 。 
本 实例 我 们 就 使 用 CSS 配合 及 【元素 设计 一 个 漂亮 的 菜单 条 。 


11.7.3 ”实例 应 用 


【 例 11-6】 横 排 的 列表 元 素 
(1) 使 用 Dreamweaver 打开 11.6 节 使 用 的 站 点 。 
(2) 新 建 一 个 HTML 页 面 ， 命 名 为 display.html。 
(3) 编辑 display.html 页 面 ， 添 加 页 面 内 容 ， 代 码 如 下 : 


<div id="menubar"> 
<ul> 

<li><a href="#"><span>Home</span></a></1i> 
<li><a href="#"><span>MyPhoto</span></a></1i> 
<li><a href="#"><span>MyArticle</span></a></1i> 
<li><a href="#"><span>MyFamily</span></a></1i> 
<li><a href="#"><span>MyScroll</span></a></1i> 
<li><a href="#"><span>MyFriend</span></a></1i> 


<li><a href="#"><span>Message</span></a></1i> 
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</ul> 
</div> 


(4) 在 css 目录 中 创建 一 个 CSS 样式 表 文 件 ， 命 名 为 display.css。 
(5) 编辑 display.css 文件 ， 添 加 样式 代码 ， 如 下 所 示 : 


Q@charset "utf-8"7 


body { 
background-image:url(../imgs/display bg.jpg) 
} 
rh Pe 
margin:0; 
padding:0; 
} 
#menubar { 
margin:180px 0 0 0; 
height:24px; 
font-size:14px; 
border-bottom:lpx solid #E276A7; 
} 
#menubar 1i { 
display:inline; 
} 
#menubar a { 
float:left; 
background:url("../imgs/m left.gif") no-repeat left top; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
#menubar a span { 
display:block; 
background:url("../imgs/m right.gif") no-repeat right top; 
padding:5px 1l15px 4px 6px; 
color:#333; 
} 


(6) 在 display.html 页 面 的 head 部 分 添加 对 CSS 样式 表 文件 display.css 的 引用 ， 代 码 
如 下 : 


<link rel="stylesheet" type="text/css" href="css/display.css"/> 


11.7.4 ”运行 结果 


使 用 IE8 浏览 器 打开 display.html 页 面 ， 运 行 结果 如 图 11-12 所 示 。 
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图 11-12 横 排 的 列表 元 素 


11.7.5 ”实例 分 析 


ami 


本 实例 首先 在 页 面 中 添加 一 个 作为 菜单 条 容器 的 div 元 素 ,用 于 控制 页 面 中 菜单 条 的 位 置 ; 
然后 在 该 div 中 添加 一 个 用 于 排列 菜单 项 的 列表 元 素 ， 以 及 菜单 项 里 的 内 容 ; 最 后 在 样式 表 文 
件 中 设置 菜单 条 、 菜 单项 ， 以 及 链接 文本 的 样式 。 其 中 设置 菜单 项 列表 中 的 各 项 的 display 属 
性 值 为 inline 来 使 所 有 的 菜单 项 显示 在 一 行 中 ， 实 现 了 一 个 横向 排列 的 列表 效果 。 


11.8 使 页 面 元 素 不 可 见 


要 使 页 面 元 素 不 可 见 有 几 种 方法 ， 不 过 常用 的 是 使 用 CSS 样式 表 中 的 visibility 属性 或 
display 属性 设置 页 面 元 素 的 可 见 性 。 
， 上 一 节 我 们 已 经 了 解 到 了 可 以 将 display 属性 的 值 设 为 none 来 将 页 面 中 元 素 隐藏 。 不 过 还 
| 有 一 种 方式 ， 就 是 使 用 visibility 属性 控制 页 面 元 素 的 可 见 性 。 
visibility 属性 的 基本 语法 如 下 : 
visibility : inherit | visible | collapse | hidden 


对 于 该 属性 值 的 4 个 可 选项 ， 具 体 说 明 如 下 。 

@ inherit: 默认 值 。 继 承 父 对 象 的 可 见 性 。 

@ visible: 对 象 可 见 。 

@ collapse: 主要 用 来 隐藏 表格 的 行 或 列 。 隐 藏 的 行 或 列 能 够 被 其 他 内 容 使 用 。 对 于 表 
格外 的 其 他 对 象 ， 其 作用 等 同 于 hidden。 

@ hidden: 对 象 隐藏 。 

既然 都 是 隐藏 , 两 个 不 同 的 方法 肯定 应 该 有 一 定 的 差异 。 我 们 来 看 一 下 使 用 效果 上 的 对 比 。 

比如 页 面 中 有 三 个 div， 代 码 如 下 : 
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<div id="first"> 第 一 个 DIV</div> 
<div id="second"> 第 二 个 DIV</div> 
<div id="third"> 第 三 个 DIV</div> 


在 样式 表 中 给 它们 添加 样式 : 


div { 
border:solid lpx #ccc; 
margin:8px; 
padding:S5px; 

} 


正常 情况 下 浏览 器 中 的 运行 效果 如 图 11-13 所 示 。 
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11-13 无 隐藏 效 果 
然后 我 们 为 第 二 个 div 添加 display 属性 使 其 隐藏 ， 代 码 如 下 : 


#second { 
display:none; 


} 
运行 以 后 ， 结 果 如 图 11-14 所 示 。 
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11-14 ”使 用 display 属性 隐藏 元 素 
下 面 将 display 属性 修改 为 使 用 visibility 属性 ， 代 码 如 下 : 


#second { 
visibility:hidden; 


} 
运行 以 后 ， 结 果 如 图 11-15 所 示 。 
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图 11-15 使 用 visibility 属性 隐藏 元 素 
通过 上 面 的 比较 ， 就 很 容易 看 出 使 用 visibility 属性 和 display 属性 隐藏 元 素 的 差异 了 。 
visibility 属性 只 是 设置 该 元 素 不 可 见 , 但 是 在 文档 中 还 保留 着 它 的 位 置 ; 而 使 用 display 属性 则 
是 将 该 元 素 从 文档 流 中 清理 掉 。 具 体 用 法 视 情 况 而 定 。 


11.9 ”常见 问题 解答 


11.9.1 div 布局 用 绝对 定位 好 还 是 用 相对 定位 好 


div 布局 用 绝对 定位 好 还 是 用 相对 定位 好 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-11906-1-1.html 


请 教 大 家 div 布局 用 绝对 定位 好 还 是 用 相对 定位 好 ? 

【解决 办 法 】 使 用 div+CSS 布局 很 少 会 用 到 定位 ， 除 非 有 需要 做 一 些 特殊 效果 的 时 候 才 需 
要 定位 。 通 常情 况 下 ，div 的 布局 就 像 表 格 那样 嵌 套 使 用 。 

如 果 非 要 问 用 绝对 定位 好 还 是 用 相对 定位 好 ? 我 个 人 觉得 各 有 优 劣 ， 不 过 相对 定位 比较 
常用 。 

因为 绝对 定位 和 文档 流 没关系 ， 如 无 声明 ， 则 其 定位 是 相对 body 而 言 的 。 处 理 不 好 的 话 ， 
如 浏览 器 尺寸 变 了 ， 页 面 可 能 就 会 变形 。 

相对 定位 的 元 素 属 文档 流 ， 所 以 是 稳定 的 ， 相 对 定位 是 相对 它 应 该 出 现 的 位 置 ， 如 没有 设 
置 top left 之 类 的 属性 ， 和 普通 的 div 一 模 一 样 。 

绝对 定位 是 这 样 用 的 : 如 果 父 元 素 是 相对 定位 的 ， 并 且 具 有 有 具体 的 布局 ， 那 么 其 子 元 素 可 
以 使 用 绝对 定位 (相对 于 父 元 素 ) 。 如 果 父 元 素 不 具有 上 述 条 件 ， 那 么 子 元 素 使 用 的 绝对 定位 
实际 上 是 相对 body 进行 定位 的 。 


11.9.2 ”CSS 样式 中 float 属性 的 问题 


CSS 样式 中 float 属性 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-11907-1-1.html 


比如 有 如 下 代码 : 


me >> 


<div id="content1"> 
<div style="float : left"></div> 
<div style="float : right"></div> 
<div sytle="clear : both"></div> 
</div> 


一 直 搞 不 明白 ， 既 然 清 除了 浮动 ， 就 不 应 该 再 浮动 了 ， 即 两 个 div 应 该 各 自 独占 一 行 ， 而 
事实 是 两 个 div 仍然 浮动 在 左右 两 边 ? 

【解决 办 法 】 可 能 是 你 理解 错 了 。 

清除 浮动 是 指 清除 其 他 元 素 浮动 对 它 造 成 的 影响 。 帮 助 文档 上 说 “该 属性 的 值 指 出 了 不 允 
许 有 浮动 对 象 的 边 ”， 意 思 就 是 指定 哪 条 边 不 可 以 有 设置 浮动 属性 的 对 象 ， 如 果 有 的 话 ， 就 换 
一 行 显示 ， 不 跟 它们 一 起 显示 。 

所 以 说 它 设置 的 清除 浮动 不 会 对 前 两 个 元 素 的 浮动 属性 造成 影响 。 


TO :可 题 
1. 填空 题 
(1) 如 果 要 让 一 个 div 脱离 文档 流 ， 显 示 在 页 面 中 的 固定 位 置 ， 可 以 设置 该 div 元 素 CSS 
样式 中 的 position 属性 值 为 


(2) 如 果 要 设置 一 个 绝对 定位 的 元 素 距 页 面 底部 的 距离 ， 可 以 设置 该 元 素 CSS 样式 表 中 
的 属性 。 
(3) 如 果 要 设置 一 个 绝对 定位 的 图 片 的 显示 区 域 ， 可 以 设置 该 图 片 元 素 在 CSS 样式 表 中 
的 属性 。 
(4) 如 果 要 将 一 个 超 链接 标签 显示 为 块 元 素 ， 需 要 将 CSS 样式 表 中 的 display 属性 的 值 设 
为 
2. 选择 题 
(1) 如 果 需 要 在 容器 元 素 内 容 溢出 的 时 候 为 容器 添加 滚动 条 ， 可 以 设置 该 容器 元 素 CSS 
样式 overflow 的 值 为 


A. visible B. auto C. hidden D. scroll 
(2) 如 果 页 面 中 一 个 div 元素 被 设置 了 以 下 样式 : 
#div { 


width:100px; 
height:100px; 
position:absolute; 
top:07 

left:0; 

right:0; 

bottom:0; 


< 洁 一 - 
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那么 该 元 素 将 显示 在 5 
A. 页 面 左上 角 ”B. 页 面 右 下 角 C. 窗口 右上 角 D. 窗口 左下 角 
(3) 如 果 要 使 页 面 中 的 一 个 元 素 不 显示 ， 而 且 还 需要 保留 该 元 素 所 占 的 空间 ， 可 以 设置 该 


元 素 
A. display 属性 值 为 none B. display 属性 值 为 hidden 
C. visibility 属性 值 为 none D.， visibility 属性 值 为 hidden 
(4) 如 果 要 设置 多 个 div 元 素 显示 在 一 行 中 ， 可 以 设置 这 些 元 素 CSS 样式 的 
属性 为 left。 
A. float B. display C. position D. overflow 


3. 上 机 练习 

上 机 练习 : 实现 页 面 固定 位 置 工具 条 

在 有 些 空间 或 者 论坛 中 会 有 一 些 显示 在 窗口 内 容 区 顶部 或 底部 的 一 个 工具 条 , 显示 一 些 常 
用 的 操作 。 

这 个 工具 条 在 页 面 中 滚动 条 滚动 的 时 候 一 直 保持 在 页 面 的 顶部 或 底部 ,以 方便 我 们 对 页 面 
进行 一 些 操作 。 

本 练习 我 们 实现 一 个 固定 在 页 面 顶部 的 工具 条 ， 如 图 11-16 所 示 。 
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11-16 固定 位 置 的 工具 条 
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内 容 摘 要 : 

本 章 介 绍 一 些 改 善 页 面 表格 显示 布局 的 属性 ， 如 border-collapse 属性 设置 表格 的 边框 是 否 
合并 为 单线 边框 、border-spacing 属性 设置 表格 单元 格 之 间 的 距离 、caption-side 属性 设置 表格 
标题 位 置 。 通 过 本 章 的 学 习 可 以 使 页 面 表格 更 加 简洁 ， 更 能 够 方便 用 户 阅读 表格 数据 。 


学 习 目标 : 


了 解 表格 特有 的 元 素 

掌握 border-collapse 属性 的 应 用 
掌握 border-spacing 属性 的 应 用 
掌握 caption-side 属性 的 应 用 
理解 empty-cells 属性 的 应 用 
理解 table-layonut 属性 的 应 用 


[< 开发 学 习 实 录 让 


12.1 表格 特有 的 元 素 


如 果 数 据 表格 对 于 视力 正常 的 用 户 来 说 都 难以 阅读 , 那么 可 以 想象 对 于 必须 使 用 辅助 工具 
(如 屏幕 阅读 器 ) 的 用 户 ， 就 更 加 困难 了 。 不 过 COHTML 规范 提供 了 许多 元 素 和 属性 来 提高 数据 
表格 对 于 这 些 设备 的 可 访问 性 。 这 些 元 素 和 属性 当前 并 非 都 得 到 了 屏幕 阅读 器 的 支持 , 但 是 尽 
可 能 使 用 它们 肯定 是 好 做 法 。 

1. caption 和 summary 


caption 元 素 是 用 做 表格 的 标题 。 虽然 它 不 是 表格 的 必须 元 素 , 但 是 也 应 尽 可 能 使 用 它 为 表 
格 设置 一 个 标题 ， 便 于 用 户 阅 读 理解 表格 内 容 。 

summary 属性 应 用 于 <table> 标 签 ,来 描述 表格 的 内 容 。 它 与 image 的 alt 文本 相似 ,summary 
应 该 总 结 表格 中 的 数据 ， 一 个 好 的 summary 可 以 减少 用 户 阅读 表格 数据 的 需要 。 

下 面 看 看 caption 和 summary 如 何 应 用 在 表格 定义 中 ， 代 码 如 下 所 示 : 

<table summary=" 学 员 信息 表 "> 


<caption> 学 员 信息 表 </caption> 
</table> 


2. thead、tbody 和 tfoot 


使 用 thead、tbody 和 tfoot 元 素 能 够 将 表格 划分 为 三 部 分 ， 即 头 部 、 主 体 和 尾部 。 可 以 将 
所 有 列 标题 放 在 thead 元 素 中 ， 这 样 就 可 以 对 这 个 特殊 区 域 单独 地 应 用 样式 。 要 使 用 thead 元 
素 或 tfoot 元 素 ， 那 么 就 必须 至 少 使 用 一 个 tbody 元 素 。 在 一 个 表格 中 可 以 有 多 个 tbody 元 素 将 
复杂 的 表格 划分 为 更 容易 管理 的 部 分 ， 但 一 个 表格 中 只 能 有 一 个 thead 或 tfoot 元 素 。 

3. col 和 colgroup 


虽然 使 用 tr 元 素 能 够 对 整 行 应 用 样式 ， 但 是 很 难 对 整 列 应 用 样式 ， 因 此 W3C 引入 了 
colgroup 和 col 元 素 。colgroup 能 够 对 使 用 col 元 素 定义 的 一 个 或 多 个 列 进行 分 组 。 但 是 ， 支 持 
col 和 colgroup 元 素 的 样式 的 浏览 器 不 多 。 

<colgroup> 

<col id="cl"/> 

<col id="c2"/> 

<col id="c3"/> 
</colgroup> 


12.2 ”制作 一 个 单线 边框 表格 


12.1 节 介绍 了 表格 的 一 些 特 有 元 素 ， 使 用 这 些 元 素 可 以 在 页 面 中 定义 一 个 简单 的 表格 ， 本 
节 将 介绍 用 border-collapse 属性 设置 表格 的 边框 样式 。 


me >> 


二 
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8 视频 教学 : 光盘 /视频 /12/12.2 制作 一 个 单线 边框 表格 .avi @k 度 : 7 分 名 


12.2.1 基础 知识 一 一 border-collapse 


border-collapse 属性 可 以 设置 表格 的 边框 是 否 合并 为 一 个 单线 边框 ， 还 是 在 标准 的 HTML 
中 显示 一 个 分 开 边 框 。 此 属性 对 于 currentStyle 对 象 而 言 是 只 读 的 。 对 于 其 他 对 象 而 言 是 可 读 
写 的 。 对 应 的 脚本 特性 为 borderCollapse。 该 属性 的 可 选 属性 值 如 表 12-1 所 示 。 


表 12-1 border-collapse 属性 值 


属性 值 说 明 


默认 值 。 边 框 会 被 分 开 。 不 会 忽略 border-spacing 和 empty-cells 属性 


如 果 可 能 ， 边 框 会 合并 为 一 个 单一 的 边框 。 会 忽略 border-spacing 和 empty-cells 属性 
规定 应 该 从 父 元 素 继承 border-collapse 属性 的 值 


border-collapse 属性 的 基本 语法 格式 : 


border-collapse : separate | collapse 


定义 两 个 表格 ， 分 别 设置 border-collapse 属性 为 collpase 和 separate， 代 码 如 下 所 示 : 


.tablesep 

. border-collapse: separate // 设 置 边框 为 分 开 
es 

! border-collapse: collapse // 设 置 边框 合并 为 一 个 单线 边框 


} 
在 正 浏 览 器 中 执行 效果 如 图 12-1 所 示 。 
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图 12-1 设置 表格 边框 是 否 合并 


< 全 mm 
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12.2.2 ”实例 描述 


我 们 在 浏览 网 页 时 ， 经 常 看 到 这 种 效果 : 网 页 中 的 表格 都 是 单线 边框 样式 ， 这 种 样式 给 人 
的 感觉 是 表格 简洁 大 方 ， 而 在 标准 的 HTML 中 显示 的 是 一 个 分 开 边 框 。 怎 样 才能 使 我 们 的 表 
格 边框 成 为 单线 边框 呢 ? 本 节 我 们 将 制作 一 个 单线 边框 表格 的 实例 。 


12.2.3 ”实例 应 用 


【 例 12-1】 制 作 一 个 单线 边框 表格 
(1) 新 建 一 个 HTML 页 面 border-collapse-exp.html， 在 该 页 面 中 定义 一 个 表格 ， 代 码 如 下 
所 示 : 
<form name="searchuser" method="POST"> 
<center> 
<table width="80%" border="]1" align="center" bordercolor="#C0COCO" 
class="table form"> 
<tr height=25 bgcolor="#E8E8E8"> 
<th width="20%" align="center"><strong> 编 号 </strong></th> 
<th width="20%" align="center"><strong> 产 品名 称 </strong></th> 
<th width="20%" align="center"><strong> 所 属 分 类 </strong></th> 
<th width="20%" align="center"> 
<input type='checkbox' name='chkall' ><strong> 全 选 
</strong> 
<input type='submit' value="' 删除 '> 
</th> 
</tr> 
SE 
<th>1</th> 
<th> 女 士 羽绒 服 </th> 
<th> 女 士 冬装 </th> 
</tr> 
<tr> 
<th>2</th> 
<th> 雪 地 靳 </th> 
<th> 冬 靳 </th> 
</tr> 
</table> 
</center> 
</form> 


(2) 使 用 border-collapse 属性 设置 table 元 素 的 边框 样式 ， 代 码 如 下 所 示 : 


<style type="text/css"> 
-table form { 

border-collapse: collapse // 设 置 表格 为 单线 边框 
| 


st) >> 


第 12 章 逐步 改善 页 面 的 表格 国 


-table form td, .table form th { // 设 置 表格 ta、th 样式 
line-height:150%; 
padding:4px; 


font-size:12px; 
font-family: "宋体 "; 
| 
-table form th Strong { 
color:#077ac7; 
</style> 


12.2.4 ”运行 结果 


在 正 浏 览 器 中 打开 border-collapse-exp.html 文件 ， 执 行 效果 如 图 12-2 所 示 。 
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12.2.5 ”实例 分 析 


Ce 


本 实例 首先 在 HTML 页 面 border-collapse-exp.html 中 定义 了 一 个 存储 女士 服饰 数据 的 表 
格 ， 然 后 为 了 使 表格 更 加 美观 ， 使 用 border-collapse 属性 设置 了 表格 的 边框 为 合并 的 单线 框 ， 
最 后 还 设置 了 表格 的 也 、td 元 素 的 字体 、 间 隙 等 样式 。 


< 寺 一 


12.3 ”设置 单元 格 边界 之 间 的 距离 


若 表格 单元 格 边界 之 间 的 距离 设置 得 当 ， 可 以 使 表格 看 起 来 更 加 简洁 美观 ， 同 时 也 便于 用 
户 阅 读 表 格 数据 。 


< 视频 教学 : 光盘 /视频 /12/12.3 ”设置 单元 格 边界 之 间 的 距离 .avi 人 长度: 4 分 钟 


12.3.1 ”基础 知识 一 一 border-spacing 


border-spacing 属性 用 于 指定 分 隔 边框 模型 中 单元 格 边界 之 间 的 距离 。 当 指定 了 两 个 长 度 值 
时 ， 第 一 个 是 水 平 间隔 ， 第 二 个 是 垂直 间隔 。 除 非 border-collapse 被 设置 为 separate， 否则 将 忽 
略 这 个 属性 。border-spacing 属性 的 可 选 属性 值 如 表 12-2 所 示 。 


表 12-2 border-spacing 属性 值 


属性 值 说 明 
指定 相 邻 单元 格 的 边框 之 间 的 距离 。 可 以 使 用 px、cm 等 单位 ， 但 不 允许 使 用 负 值 。 
length length 如 果 定 义 一 个 length 参数 , 那么 定义 的 是 水 平和 垂直 间距 。 如 果 定 义 两 个 length 参数 ， 
那么 第 一 个 设置 水 平 间 距 ， 而 第 二 个 设置 垂直 间距 
inherit 规定 应 该 从 父 元 素 继承 border-spacing 属性 的 值 


border-spacing 属性 的 基本 语法 格式 如 下 所 示 : 
border-spacing : length 


某 些 版 本 的 正 浏览 器 不 支持 此 属性 。 另 外 如 果 已 规定 !IDOCTYPE， 那 么 Internet 
注意 | Explorer 8( 以 及 更 高 版 本 ) 支 持 border-spacing 属性 。 


12.3.2 ”实例 描述 


前 段 时 间 看 到 同事 做 了 一 个 人 事 管理 系统 ， 她 做 的 显示 员工 基本 信息 的 表格 看 起 来 很 洒 
亮 ， 后 来 才 知道 ， 她 只 是 设置 了 单元 格 边界 之 间 的 距离 ， 现 在 也 拿 出 来 与 大 家 分 享 一 下 吧 。 


12.3.3 ”实例 应 用 


【 例 12-2】 设 置 单元 格 边 界 之 间 的 距离 
(1) 新 建 一 个 border-spacing.html 文件 , 在 该 文件 中 首先 声明 两 个 表格 存储 客户 信息 , 为 这 
两 个 表格 分 别 设 置 class 属性 为 “one” 和 “two”， 代 码 如 下 所 示 : 


<table class="one" border="1"> 
<tr> 


md >> 


<td> 客 户 姓名 </td> 
<td> 出 生日 期 </tad> 
<td> 性 别 </td> 
<td> 年 龄 </td> 
</tr> 
<tr> 
<td> 江 小 鱼 </td> 
<td>1985-02-07</td> 
<td> 男 </td> 
<td>25</td> 
RE 
<tr> 
<td> 铁 心 兰 </td> 
<td>1988-09-23</td> 
<td> 女 </td> 
<td>22</td> 
</tr> 
</table> 
<br /> 
<table class="two" border="1"> 
< 
<td> 客 户 姓 名 </td> 
<td> 出 生日 期 </td> 
<td> 性 别 </td> 
<td> 年 龄 </td> 
</tr> 
EE 
<td> 江 小 鱼 </td> 
<td>1985-02-07</td> 
<td> 男 </td> 
<td>25</td> 
< Er 
SE 
<td> 铁 心 兰 </td> 
<td>1988-09-23</td> 
<td> 女 </td> 
<td>22</td> 
SEE 
</table> 
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(2) 使 用 border-spacing 属性 来 设置 上 述 定义 的 两 个 表格 的 单元 格 边界 之 间 的 距离 , 代码 如 


下 所 示 : 


<style type="text/css"> 

table.one 

{ 
border-collapse: separate; 
border-spacing: 1l10px; 
color: #0F0; 


// 设 置 表格 单元 格 水 平 垂直 间距 都 为 10px 


EC | 
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table.two 

人 
border-collapse: separate; 
border-spacing: 30px 20px; // 设 置 表 格 单元 格 水 平 间距 为 30px, 垂直 间距 为 20px 
color: #0F0; 


} 
</style> 


12.3.4 ”运行 结果 


在 正 浏 览 器 中 打开 border-spacing.html 文件 ， 执 行 效果 如 图 12-3 所 示 。 
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12-3 ”设置 表格 单元 格 间距 


12.3.5 ”实例 分 析 


6 源码 解析 : 


本 实例 定义 了 两 个 表格 ， 第 一 个 表格 的 class 属性 值 设 为 “one”， 第 二 个 表格 的 class 属 
性 值 设 为 “two”。 “one” 表 格 的 border-spacing 属性 值 设 为 10px， 表 示 表 格 单元 格 的 水 平和 
垂直 的 间距 均 为 10px; “two” 表 格 的 border-spacing 属性 值 设 为 30px 20px， 表 示 表 格 单元 格 
的 水 平 间距 为 30px， 垂 直 间 距 为 20px。 


12.4 ”设置 表格 标题 的 位 置 


为 了 帮助 用 户 快速 阅读 表格 ,制作 表格 时 为 表格 设置 一 个 标题 是 非常 必要 的 。 而 且 同 样 的 
东西 位 置 排放 得 当 ， 也 会 起 到 很 好 的 修饰 作用 ， 使 表格 看 起 来 更 加 美观 大 方 。 本 节 将 介绍 一 个 


mS >> 


= 
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S 
用 于 设置 表格 标题 位 置 的 属性 一 一 caption-side。 
上 视频 教学 : 光盘 /视频 /12/12.4 设置 表格 标题 的 位 置 .avi @ 长 度 : 3 分钟 


12.4.1 ”基础 知识 一 一 caption-side 


caption-side 属性 用 于 设置 表格 标题 的 位 置 ， 它 的 可 选 属 性 值 如 表 12-3 所 示 。 
表 12-3 caption-side 的 属性 值 及 说 明 


属性 值 说 明 
to 默认 值 。 把 表格 标题 定位 在 表格 之 上 
bottom 把 表格 标题 定位 在 表格 之 下 
inherit 规定 应 该 从 父 元 素 继承 caption-side 属性 的 值 
该 属性 的 基本 语法 格式 : 


caption-side : top |bottom 


@ ” 有 些 版 本 的 下 浏览 器 不 支持 caption-side 属性 ， 如 果 已 规定 IDOCTYPE， 那 么 
注意 Internet Explorer 8( 以 及 更 高 版 本 ) 就 可 支持 caption-side 属性 。 


12.4.2 ”实例 描述 


- 般 情况 下 表格 的 标题 要 放 在 表格 的 上 方 , 但 在 一 些 展 示 信 息 量 比较 大 的 网 页 中 ， 就 不 一 
定 了 ， 需 要 考虑 整体 页 面 布局 ， 适 当地 设置 表格 标题 的 位 置 。 本 节 实 例 将 为 大 家 演示 如 何 设置 
表格 标题 的 位 置 。 


12.4.3 ”实例 应 用 


【 例 12-3】 设 置 表格 标题 的 位 置 
(1) 新 建 一 个 caption-side .html 文件 , 在 该 文件 中 首先 定义 一 个 员工 信息 表 , 代码 如 下 所 示 : 
<table class="one"”border="1"> 
<caption> 员 工 信 息 表 </caption> 

<tr> 
<tqd> 员 工 姓名 </td> 
<td> 出 生日 期 </td> 
<tq> 性 别 </tq> 
<td> 年 龄 </td> 

</tr> 

EE 
<tq> 秦 小 兰 </tq> 
<td>1985-02-07</td> 


< 人 mm 


'< 开发 学 习 实录 尾 


<td> 女 </td> 
<td>25</td> 

</Er> 

<tr> 
<td> 霍 斌 </td> 
<td>1981-05-27</td> 
<td> 男 </td> 
<td>29</td> 

/Er> 

</table> 


(2) 设置 caption-side 属性 来 改变 表格 标题 的 位 置 ， 默认 的 情况 下 在 表格 的 上 方 ， 下 面 设置 


表格 标题 处 于 表格 的 下 方 ， 代 码 如 下 所 示 : 


<style type="text/css"> 
table.one 
{ 

border-collapse: separate; 
border-spacing: 1l0px; 
caption-side:bottom; 
color: #0F0; 


} 
</style> 


12.4.4 ”运行 结果 


// 设 置 表格 的 标题 处 于 表格 的 下 方 


在 正 浏 览 器 中 打开 caption-side.html 文件 ， 执 行 效果 如 图 12-4 所 示 。 


pacing 属 性 Windows Internet Exzplorer 


pt om-si de Mal 


sx 


丛 - 加 -了 本 EC” SGg、IROv 大 


到 或 解答 
为 杰 P 角 和 到 


区 工 竹 汪 他 生日 而。 隆 别 降 滞 

属 T 至 [gss0237 友 ， 际 

大 | [earesz 划 | 隔 
再 工 吝 下 要 


近 胡 最 新 策划 案 
新 策划 


二。 近 三 个 月 内 ， 所 有 产品 al 忧 丰 ， 另 外 证 推出 150 
加 条 产 品 ， 吉 击 大 用 尸 仔 验 。 
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12.4.5 ”实例 分 析 


让 源码 解析 : 


本 实例 中 首先 定义 了 一 个 员工 信息 表 ， 然后 使 用 <caption> 标 签 为 表格 定义 一 个 标题 ,最 后 
设置 caption-side 属性 值 为 bottom， 使 表格 标题 处 于 表格 的 下 方 。 


12.5 “隐藏 表格 中 空 单元 格 上 的 边框 和 背景 
有 时 表格 中 的 一 些 字段 不 是 必 填 内 容 ， 这 样 表格 中 就 会 出 现 空 单元 格 的 情况 。 如 何 来 处 理 
修饰 这 些 空 单元 格 呢 ? 本 节 将 介绍 一 个 设置 是 否 显示 表格 中 的 空 单元 格 的 属性 。 
加 视频 教学 光盘 /视频 /12/12.5 ”隐藏 表格 中 空 单元 格 上 的 边框 和 背景 avi @@ 长 度 : 4 分 名 


12.5.1 基础 知识 一 一 empty-cells 


empty-cells 属性 用 于 设置 是 否 显示 表格 中 的 空 单元 格 ， 如 果 显 示 ， 那 么 会 绘制 出 单元 格 的 
边框 和 背景 。 而 且 当 border-collapse 设置 为 separate 时 ， 此 属性 还 有 效 ， 否 则 将 忽略 这 个 属性 。 
该 属性 的 可 选 属性 值 如 表 12-4 所 示 。 

表 12-4 empty-cells 的 属性 值 


默认 值 。 不 在 空 单元 格 周围 绘制 边框 


在 空 单元 格 周围 绘 
规定 应 该 从 父 元 素 继承 empty-cells 属性 的 值 
empty-cells 属性 的 基本 语法 格式 : 
empty-cells : show | hide 
下 面 使 用 empty-cells 属性 来 设置 使 表格 中 的 空 单元 格 显示 出 来 ， 代 码 如 下 所 示 : 


table.one 


{ 


border-collapse: separate; 
border-spacing: 10px; 
empty-cells: show; // 设 置 空 单元 格 显示 出 来 
color: #0F0; 
} 


在 正 浏 览 器 中 的 执行 效果 如 图 12-5 所 示 。 


7 


图 12-5 设置 空 单元 格 显示 出 来 


12.5.2 ”实例 描述 


项 目 终于 完成 了 ， 我 也 可 以 清闲 一 段 时 间 了 , 不 过 这 次 项 目 中 我 负责 的 模块 处 理 表格 的 比 
较 多 ， 还 有 了 一 些 新 发 现 ， 比 如 : 隐藏 表格 中 空 单元 格 上 的 边框 和 背景 。 这 些 功 能 都 可 以 使 我 
们 制作 的 页 面 更 加 完整 、 美 观 。 本 节 实 例 将 向 大 家 讲解 一 下 隐藏 表格 中 空 单元 格 的 边框 和 背景 
的 实现 方法 。 


12.5.3 ”实例 应 用 


【 例 12-4】 隐 藏 表格 中 空 单元 格 上 的 边框 和 背景 
(1) 新 建 一 个 empty-cells-exp.html 文件 ， 在 该 文件 中 定义 一 个 存储 集团 信息 的 表格 ， 代 码 


如 下 所 示 : 
<table class="tablesep" border="]1" width="100%"> 

<tr> 
<td> 集 团 编码 </td> 
<td> 集 团 名 称 </td> 
<td> 地 址 </tad> 
<td> 电 话 号 码 </td> 

区 WE 

i 
<td>001</td> 
<td> 汇 智 科 技 </td> 
<td> 郑 州 市 </td> 
<td>0371-66668888</td> 

KEFE> 

< 
<td>002</td> 
<td> 天 天 向 上 有 限 公司 </td> 
<td> 重 庆 市 </td> 
<td></td> 

/E> 

</table> 
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(2) 在 该 文件 中 使 用 empty-cells 属性 ， 设 置 将 空 单元 格 的 边框 隐藏 ， 代 码 如 下 所 示 : 


-tablesep { 


border-collapse:separate; 
empty-cells:hide; // 设 置 隐藏 表格 中 空 单元 格 的 边框 


border-spacing: 10px7 


12.5.4 ”运行 结果 


在 正 浏 览 器 中 打开 empty-cells-exp.html 文件 ， 执 行 效果 如 图 12-6 所 示 。 


ER 本 加- WE 四 2 名，IRO， 各-“ 


图 12-6 隐藏 表格 中 空 单元 格 上 的 边框 


12.5.5 ”实例 分 析 


上 源码 解析 : 


本 实例 在 empty-cells-exp.html 文件 中 定义 一 个 集团 信息 表格 ， 通 过 设置 border-collapse 属 
行 值 为 separate， 使 表格 的 边框 线 为 分 开 的 ，empty-cells 属性 值 为 hide， 使 表格 中 空 单元 格 上 
的 边框 和 背景 隐藏 。 


12.6 ”隐藏 单元 格 超出 的 数据 


控制 表格 的 整体 布局 是 非常 重要 的 ， 一 个 好 的 布局 不 仅 看 起 来 美观 ， 便 于 用 户 阅读 表格 信 
息 ， 也 使 浏览 器 可 以 更 快速 地 给 用 户 提供 信息 。 本 节 将 介绍 一 个 设置 表格 整体 布局 算法 改善 表 


< 法 一 


格 呈 递 性 的 属性 。 
上 视频 教学 ;光盘 /视频 /12112.6 隐藏 单元 格 超出 的 数据 .avi 人 @@ 长 度 : ;分钟 


12.6.1 基础 知识 一 一 table-layout 
table-layout 属性 可 以 改善 表格 呈 递 性 能 。 此 属性 导致 正 以 一 次 一 行 的 方式 呈 递 表格 内 容 
从 而 以 更 快 的 速度 给 用 户 提供 信息 。 该 属性 的 可 选 值 如 表 12-5 所 示 。 
表 12-5 table-layout 的 属性 值 


属性 值 说 明 


默认 值 。 默 认 的 自动 算法 ， 布 局 将 基于 各 单元 格 的 内 容 。 表 格 在 每 一 单元 格 内 所 有 内 容 


ae 读 取 计算 之 后 才 会 显示 出 来 
固定 布局 的 算法 。 在 这 种 算法 中 ， 表 格 和 列 的 宽度 取决 于 col 对 象 的 宽度 总 和 ， 假 如 没 
fixed 有 指定 ， 则 会 取决 于 第 一 行 每 个 单元 格 的 宽度 。 假 如 表格 没有 指定 宽度 (width) 属 性 ， 则 


表格 被 呈 递 的 默认 宽度 为 100% 


通过 table-layout 属性 值 可 以 设置 自动 表格 布局 和 固定 表格 布局 ， 这 两 种 布局 格式 具体 介 
绍 如 下 。 
@ 固定 表格 布局 
固定 表格 布局 与 自动 表格 布局 相 比 ， 人 允许 浏览 器 更 快 地 对 表格 进行 布局 。 
在 固定 表格 布局 中 ， 水 平 布局 仅 取 决 于 表格 宽度 、 列 宽度 、 表 格 边框 宽度 、 单 元 格 间 
距 ， 而 与 单元 格 的 内 容 无 关 。 
@ 自动 表格 布局 
在 自动 表格 布局 中 ， 列 的 宽度 是 由 列 单元 格 中 没有 折 行 的 最 宽 的 内 容 设 定 的 。 
此 算法 有 时 会 较 慢 ， 这 是 由 于 它 需 要 在 确定 最 终 的 布局 之 前 访问 表格 中 所 有 的 内 容 。 


@ ?设置 此 属性 值 为 fxed， 有 助 于 提高 表格 性 能 。 对 于 长 表格 的 效果 尤为 显著 ， 


技 


table-layout 属性 的 基本 语法 格式 如 下 : 
table-layout : auto | fixed 
下 面 使 用 table-layout 属性 来 设置 表格 的 布局 ， 代 码 如 下 所 示 : 


<style type="text/css"> 
.tablesep 
table-layout: automatic 
1 
-tablecoll 
| 
table-layout: fixed 
1 
</style> 
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在 浏览 器 中 运行 的 效果 如 图 12-7 所 示 。 


12-7 ”设置 表格 布局 


设置 表格 行 高 可 以 进一步 提高 呈 弟 速度， 浏览 器 不 需要 检测 行内 每 个 单元 格 的 内 
容 去 确定 行 高 ， 就 可 以 开始 解析 以 及 呈 递 。 此 属性 对 于 currentStyle 对 象 而 言 是 只 
读 的 。 对 于 其 他 对 象 而 言 是 可 读 写 的 。 


© 


洗 
冲 


12.6.2 ”实例 描述 


前 段 时 间 在 网 上 看 到 有 人 问 ， 怎样 实现 隐藏 单元 格 超出 的 数据 ， 当 时 我 想 了 半天 也 不 知道 
该 怎么 实现 ， 今 天 突然 实现 了 ， 就 拿 出 来 和 大 家 分 享 一 下 。 


12.6.3 ”实例 应 用 


【 例 12-$】 隐 藏 单元 格 超出 的 数据 
(1) 新 建 一 个 table-layout-exp.html 文件 ， 在 该 文件 中 定义 一 个 表格 记录 各 大 主流 技术 的 信 
息 ， 代 码 如 下 所 示 : 


<table class="aa" border="2" cellpadding="0" cellspacing="0" 
bordercolor="#F9F9F9" id="dataLayer"> 
<colgroup> 
<col width="119" /> 
<col width="199" /> 
<col width="99" /> 
</colgroup> 
<tbody> 
<tr basestyle="oRowLine2"> 
<td>J2SE</td> 
<td>Java 2 Standard Edition </td> 
<td>gnbsp;</td> 
< 三 
<tr basestyle="oRowLinel"> 
<td>sMs</td> 
<td>Short Message Service </td> 
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<td> 短 信息 服务 </td> 

</tr> 

<tr basestyle="oRowLine2"> 
<td>Windows Mobile Smartphone </td> 
<td>gnbsp;</td> 
<td>gnbsp;</td> 

上 全 

<tr basestyle="oRowLinel"> 
<td>MIDlet</td> 
<td>gnbsp;</td> 
<td> 按 MIDP 规范 开发 的 J2ME 应 用 程序 </td> 

</Er 

<tr basestyle="oRowLine2"> 
<td>MIDP</td> 
<td>Mobile Information Device Profile </td> 
<td> 移 动 信息 设备 框架 </td> 

0 

<tr basestyle="oRowLinel"> 
<td>Profile</td> 
<td>gnbsp;</td> 
<td> 框 架 / 简 表 </td> 

</Er> 

<tr basestyle="oRowLine2"> 
<td>KVM</td> 
<td>K virtual Machine </td> 
<td>gnbsp;</td> 

</tr> 

<tr basestyle="oRowLinel"> 
<td>SDK</td> 
<td>Software Development Kit </td> 
<tq> 软 件 开发 工具 包 </td> 

/Er> 

<tr basestyle="oRowLinel"> 
<td>JRD</td> 
<td>Java Application Descriptor </td> 
<td> 应 用 程序 描述 符 </td> 

< 二/EE> 

<tr basestyle="oRowLine2"> 
<td>GCF</td> 
<td>General Connection Framework </td> 
<td>gnbsp;</td> 

EE 

<tr basestyle="oRowLinel"> 
<td>RMS</td> 
<td>Record Management System </td> 
<td> 记 录 管 理 系统 </td> 

</Er> 

<tr basestyle="oRowLine2"> 
<td>sprite</td> 


mm >> 
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<td>gnbsp; </td> 
<td> 精 灵 </td> 
</tr> 
</tbody> 
</table> 


(2) 设置 表格 的 布局 ， 使 各 单元 格 不 允许 换行 ， 隐 藏 超出 的 数据 ， 代 码 如 下 所 示 : 
<style> 
.aaf{ 
table-layout : fixed; 
} 
tdf 
overflow:hidden; 
height:22px; 
} 
</style> 


12.6.4 ”运行 结果 


在 正 浏 览 器 中 打开 table-layout-exp.html 文件 ， 执 行 效果 如 图 12-8 所 示 。 


| D: Wworye\css_12\toble-loyout-exp\ table-l1ayout-exp. htal 


Hx 


窗 收 大 站 toble-layout 必 性 ”页 面 和 ) 安全 G) ”工具 DO 恩 - ” 


疑难 解答 市 场 调查 


12-8 ”隐藏 单元 格 超出 的 数据 


< 人 mm 


12.6.5 ”实例 分 析 


应 源码 解析 : 


本 实例 在 页 面 table-layout-exp.html 中 定义 了 一 个 记录 主流 技术 信息 的 表格 ， 该 表格 的 
table-layout 属性 设置 为 fixed， 使 表格 布局 为 国定 模式 ， 即 表格 的 每 列 宽度 固定 不 变 ， 并 且 设 
置 了 td 单元 格 的 overflow 属性 值 为 hidden， 这 样 就 使 表格 的 单元 格 不 换行 ， 超 出 的 数据 隐 
藏 了 。 


12.7 ”常见 问题 解答 


12.7.1 ”border-collapse 问题 


CSS 问题 border-collapse:collapse。 
网 络 课堂 : http://bbs.itzcn.com/thread-12394-1-1.html 


我 使 用 border-collapse:collapse:border: 1px solid #000000 这 样 的 设置 ， 虽 然 能 够 将 表格 合 
并 ， 但 合并 后 的 颜色 却 很 浅 ， 如 何 才能 更 换 合 并 后 表格 的 颜色 ， 我 试 了 多 种 办 法 都 无 效 。 
【解决 办 法 】#000000 边框 的 颜色 为 黑色 ， 要 重新 设置 背景 色 的 background 属性 。 你 感觉 
浅 的 话 可 能 是 由 于 lpx 造成 的 视觉 效果 吧 ， 可 以 加 宽 边 框 。 要 更 换 边 框 颜 色 的 话 只 需 设 置 
“#000000” 为 RGB 颜色 就 可 以 了 。 


12.7.2 ”CSS 表格 样式 问题 


CSS 表格 样式 问题 。 
网 络 课堂 : http:Wbbs.itzcn.comythread-12395-1-1.html 

我 做 了 一 个 简单 的 登录 ， 前 台 用 的 是 CSS 控制 样式 ， 首 先 给 当前 的 表格 设置 了 一 个 id， 
然后 在 一 个 框架 里 面 用 了 绝对 定位 。 代 码 如 下 所 示 : 


#t{ 
position:absolute; 


top: Opx; 
} 
怎么 表格 不 能 紧 靠 顶端 昵 ?我 想 让 表格 和 顶端 无 颖 连接 ， 我 又 尝试 使 用 以 下 代码 : 
body { 


text-align:top 
| 


第 12 章 逐步 改善 页 面 的 表格 国 


还 是 不 行 ， 求 高 手 帮忙 解释 。 
【解决 办 法 】 使 用 以 下 代码 就 可 以 了 : 


body { 
position:relative; 


| 


12.7.3 border-collapse 取 值 的 区 别 


器: CSS 中 border-collapse 的 两 个 值 有 什么 区 别 ? 
[这 傅 网 络 课堂 : http://bbs.itzen.com/thread-12396-1-1 html 
border-collapse : separate | collapse, 请 问 这 两 个 值 有 什么 区 别 ? 我 试 了 一 下 , 只 不 过 是 表格 
一 个 带 边框 ， 一 个 不 带 边 框 而 已 。 我 想 没 这 么 简单 吧 ， 如 果 是 这 样 的 话 要 这 个 属性 就 没 用 了 ， 
直接 设置 table 的 border=0 或 等 于 特定 值 不 就 行 了 ? 
【解决 办 法 】 可 能 是 你 没有 仔细 看 效果 吧 ， 当 border-collapse 属性 值 设 为 separate 时 ， 边 
框 样式 是 : 
| | 边框 线 是 分 开 的 。 
当 该 属性 值 设 为 collapse 时 ， 边 框 会 合并 为 一 个 单线 的 边框 ， 如 下 : 
| | 边框 线 是 合并 的 。 


12.8 习 题 


1. 填空 题 

(1) border-collapse 属性 可 以 设置 表格 的 边框 是 否 合并 为 一 个 单线 边框 ， 还 是 在 标准 的 
HTML 中 显示 一 个 分 开 边 框 。 该 属性 有 3 个 可 选 值 ， 分 别 是 separate、 和 inherit。 

(2) empty-cells 属性 用 于 设置 是 否 显示 表格 中 的 空 单 元 格 ， 下 面 使 用 该 属性 设置 表格 中 空 
单元 格 是 否 显示 ， 代 码 如 下 所 示 : 


table.one 


{ 

empty-cells: show; 

color: #0F0; 
} 

上 述 代码 设置 表格 空 单元 格 。 
(3) 设置 表格 单元 格 之 间 的 间距 ， 代 码 如 下 所 示 : 
table 


{ 
border-spacing: 1l10px; 
color: #0F0; 


Eee | 


其 中 10px 代表 

2. 选择 题 

(1) 下 面 使 用 border-spacing 属性 设置 表格 边框 样式 ， 代 码 如 下 所 示 : 
-tablesep 


{ 


border-collapse: separate; 
} 
以 下 对 上 述 设置 表格 边框 样式 描述 正确 的 是 。 
A. 表格 边框 宽度 为 separate B. 表格 边框 为 分 开 样 式 
C. 表格 边框 合并 为 一 个 单线 样式 ”D.， 以 上 选项 都 不 正确 
(2) 下 面 属性 可 以 用 来 指定 分 隔 边框 模型 中 单元 格 边界 之 间 的 距离 。 
A. border-collapse B. border-spacing 
C. caption-side D. empty-cells 
(3) caption-side 属性 设置 表格 标题 的 位 置 ， 代 码 如 下 所 示 : 
table.one 


{ 
caption-side:bottom; 


} 


该 代码 设置 了 表格 标题 的 位 置 为 
A. 在 表格 的 上 方 B. 在 表格 的 右 方 
C. 在 表格 的 左 方 D. 在 表格 的 下 方 

(4) 下 面 可 以 设置 表格 的 布局 的 属性 是 
A.，caption-side 属性 B. empty-cells 属性 
C.，table-layout 属性 D.， border-spacing 属性 


3. 上 机 练习 


上 机 练习 : 制作 一 个 客户 信息 表 

练习 要 求 : 客户 信息 表 需 要 包含 客户 名 称 、 性 别 、 年 龄 和 交易 日 期 。 表 格 定义 完成 之 后 ， 
需要 设置 表格 单元 格 水 平 与 垂直 距离 都 为 15px, 表格 的 标题 位 于 表格 的 下 方 , 空 的 单元 格 也 要 
显示 周转 边框， 并 且 设置 表格 为 固定 布局 。 执 行 效果 如 图 12-9 所 示 。 


图 12-9 客户 信息 表 


改善 页 面 的 表单 


内 容 摘 要 : 

表单 是 网 站 设计 和 开发 必 不 可 少 的 一 部 分 ， 缺 了 它 ， 我 们 很 多 事情 都 无 法 完成 。 例 如 : 向 
用 户 获 取 个 人 数据 ， 向 公告 栏 提交 信息 ， 为 购物 车 添加 物品 ， 更 新 微 博 信息 等 。 

虽然 表单 在 网 页 中 十 分 重要 ,但 是 非常 遗憾 的 是 : HTML 并 没有 为 设计 者 提供 任何 可 选 的 
样式 ， 所 以 表单 只 能 以 浏览 器 默认 的 样式 显示 。 为 了 弥补 这 些 不 足 ，CSS 可 谓 是 雪中送炭 ， 提 
供 了 许多 在 文档 中 定位 表单 元 素 的 方法 ， 使 表单 元 素 能 够 使 用 CSS 样式 规则 。 

本 章 将 介绍 一 些 相对 生僻 的 、 能 增强 表单 可 用 性 的 HTML 标签 、 属 性 ， 及 一 些 额 外 可 用 
的 CSS 元 素 。 但 是 值得 我 们 注意 的 是 : 不 能 一 味 地 注重 表单 的 外 形 美 观 ， 也 要 保证 表单 的 可 
用 性 。 因 为 表单 是 用 来 获取 用 户 输入 信息 的 ， 但 是 如 果 用 户 都 不 知道 应 该 如 何 使 用 他 们 ， 表 单 
再 漂亮 也 没有 任何 意义 。 

学 习 目 标 : 
制作 特殊 样式 的 文本 框 
同一 个 表单 中 制作 特殊 样式 的 文本 框 和 按钮 
创建 与 文档 同行 的 搜索 框 
对 相关 的 字段 进行 分 组 
为 快捷 键 提示 信息 设置 样式 
制作 不 同 背景 的 下 拉 菜 单 
强调 显示 当前 的 焦点 字段 


13.1 制作 特殊 样式 的 文本 框 


HTML 表单 元 素 是 用 来 输入 用 户 信息 和 提交 数据 的 。 由 于 HTML 没有 提供 任何 可 选 的 样 
式 ， 所 以 我 们 想 要 设置 “文本 框 ”、“ 下 拉 列 表 框 ”等 表单 元 素 的 样式 就 得 费 点 心思 了 。CSS 
为 我 们 提供 了 许多 在 文档 中 定位 表单 元 素 的 方法 ， 本 节 我 们 来 研究 一 下 CSS 如 何 为 表单 元 素 
设置 样式 。 


名 视频 教学 : 光盘 /视频 /13/13.1 制作 特殊 样式 的 文本 框 .avi @ 长 度 : 4 分 钟 


13.1.1 基础 知识 一 一 CSS 为 表单 元 素 设置 样式 


如 果 需 要 改变 form、input 等 表单 元 素 的 外 观 , 我 们 可 以 通过 CSS 为 form、 input、 textarea、 
select 等 HTML 元 素 设置 样式 来 修改 这 个 外 观 。 
例如 : 


input{ 
color:#red; 
background-color:#B898F3; 
border:lpx solid #00008b; 
font:0.9em Arial , Helvetica,sans-serif; 
padding:0.2em; width:200px; 


} 
下 面 我 们 通过 表 13-1 来 分 析 这 些 样式 。 
表 13-1 input 中 的 属性 及 其 说 明 


改变 字段 中 输入 的 文本 的 颜色 
background-color 定义 字段 的 背景 颜色 
本 | 改变 字段 的 边框 ， 所 有 其 他 边框 的 样式 都 可 以 使 用 
font | 改变 字段 中 字体 的 大 小 和 颜色 
addin 设置 输入 框 和 字段 中 输入 的 文字 之 间 的 间隔 
width 允许 用 户 输入 的 最 大 宽度 (例如 不 希望 用 户 输入 太 长 的 内 容 ) 


form、input、select、textarea 都 有 表 13-1 所 示 的 那些 属性 ， 同 样 地 通过 修改 这 些 
注意 属性 ， 可 以 改变 select、textarea 等 表单 元 素 的 外 观 。 


13.1.2 ”实例 描述 


我 们 在 注册 用 户 信息 和 使 用 用 户 名 及 密码 登录 时 ， 或 者 是 利用 搜索 引擎 搜索 信息 时 ， 都 一 


mm > 
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定 会 用 到 文本 框 。 而 文本 框 的 样式 也 是 品种 繁多 。 为 了 看 起 来 显得 美观 大 方 ， 再 小 的 细节 也 必 
须要 高 度 重 视 。 例 如 : 文本 框 的 边框 样式 ， 背 景 颜色 ， 输 入 内 容 距 离 文本 框 的 间隙 等 ， 这 都 会 
影响 页 面 的 整体 效果 。 

下 面 就 让 我 们 来 做 一 个 有 特殊 样式 的 输入 框 的 登录 窗口 。 


13.1.3 ”实例 应 用 


【 例 13-1】 制 作 特殊 样式 的 文本 框 
(1) 创建 一 个 名 为 login.html 的 页 面 。 
(2) 为 表单 元 素 定义 样式 ， 代 码 如 下 : 


form { 
padding:0px; 
} 
input { 
background-color:#E8EcF8; 
color:red; 
border:thin solid #798DB9; 
font:0.9em Arial , Helvetica,sans-serif; 
padding:0.2em; 
height:12px; 
} 
(3) 在 body 元 素 中 表单 元 素 的 代码 如 下 所 示 : 
<form class="bg"> 
<div id="apDiV1"> 
<input type="text" /> 
<div id="apDivtab"></div> 
<input type="text" /> 
</div> 
</form> 


(4) 为 了 使 界面 看 起 来 更 加 美观 ， 我 们 布局 一 下 页 面 ， 效 果 如 图 13-1 所 示 。 


图 13-1 布局 好 的 页 面 效 果 


(5) 保存 修改 的 代码 。 
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13.1.4 ”运行 结果 


直接 打开 浏览 器 ， 界 面 运行 的 效果 如 图 13-2 所 示 。 
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图 13-2 设置 好 的 背景 色 和 边框 样式 的 效果 
设置 字体 颜色 为 红色 ， 显 示 的 效果 如 图 13-3 所 示 。 


EE EE 


13-3 input 元 素 中 字体 为 红色 的 效果 


13.1.5 ”实例 分 析 


让 源码 解析 : 


在 本 章 实例 中 ， 定 义 了 input{} 表 单元 素 的 样式 ， 可 以 看 到 该 页 面 中 所 有 input 元素 都 会 使 
用 已 经 定义 好 的 input 样式 。 因 此 需要 什么 样 的 效果 直接 在 某 个 表单 元 素 中 设置 样式 即 可 。 


13.2 ”制作 特殊 样式 的 文本 框 和 按钮 


通过 上 节 的 学 习 ， 我 们 知道 input 元 素 有 很 多 种 类 型 。 而 对 于 文本 框 应 用 的 样式 和 对 于 按 
钮 、 单 选 按钮 、 复 选 按钮 应 用 的 样式 截然 不 同 。 如 何 为 不 同 的 表单 字段 创建 特定 的 样式 呢 ? 


EL 人) >> 
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本 节 将 介绍 如 何 为 同一 个 表单 中 的 元 素 应 用 不 同 的 样式 。 
上 视频 教学 : 光盘 /视频 /13/13.2 ”制作 特殊 样式 的 文本 框 和 按钮 .avi @ 长 度 : 4 分 名 


13.2.1 ”基础 知识 一 一 同一 个 表单 中 的 元 素 应 用 不 同 的 样式 
使 用 CSS 类 可 以 单独 为 某 种 字段 指定 样式 规则 。 但 如 果 是 不 同 种 类 的 字段 呢 ， 例 如 : 有 
些 文本 框 可 能 只 需要 输入 两 个 字符 ， 而 有 些 则 可 能 需要 输入 一 个 名 称 或 较 短 的 单词 ， 还 有 一 些 
可 能 必须 输入 一 个 完整 的 句子 。 那 我 们 就 需要 为 这 些 较 小 、 中 等 、 较 大 的 文本 框 创建 CSS 类 ， 
让 它们 能 够 选择 与 用 户 输入 数据 相 适 应 的 样式 。 这 样 就 能 帮助 用 户 确 认 它 们 输入 的 信息 是 否 
合适 。 
下 面 我 们 以 一 个 显示 为 文本 框 ， 一 个 显示 为 Submit( 提 交 ) 按 钮 为 例 做 一 下 对 比 。 为 所 有 输 
入 元 素 创 建 一 组 相同 的 样式 (特定 的 宽度 加 上 一 个 内 陷 的 边框 )， 代 码 如 下 所 示 : 
input { 
background-color:#elf4ee; 
border:groove lpx #C6EAE8; 


color:red; 
width:120px; 


} 
显示 的 结果 如 图 13-4 所 示 。 


国 了 Veriztoanbtn hal 


室 怕 陈 天 。 由 表 四 元 素 9H 式 


图 13-4 将 同一 样式 应 用 到 不 同 的 字段 中 
图 13-4 中 【确定 】 和 【取消 】 按 钮 看 起 来 更 像 一 个 文本 框 ， 而 不 像 一 个 按钮 。 为 了 弥补 
这 样 的 缺陷 ， 我 们 需要 为 同一 表单 中 不 同 种 类 的 字段 设置 特定 的 样式 。 代 码 如 下 


Da 
background-color:#F60; 


color:red; 
width:120px; 
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border:solid lpx #C6EAE8; 

} 

input.btn { 
background-color:#FFF; 
border:solid lpx #DBDBDB; 
width:80px; 

} 


@ 5 提 到 按钮 ， 我们 不 得 不 注意 按钮 的 background-color 属性 ， 当 它 的 属性 设置 为 
注意 | ”Transparent 时 ， 按 钮 的 显示 情况 和 文本 没有 什么 分 别 。 


13.2.2 ”实例 描述 


如 果 一 个 表单 中 有 “输入 框 ” 和 “按钮 ”， 当 我 们 为 所 有 input 元 素 设置 一 组 相同 的 样式 
时 ， 浏 览 器 显示 的 效果 如 图 13-4 所 示 。 不 是 很 美观 ， 所 以 我 们 要 设置 不 同 的 类 ， 使 每 个 表单 
元 素 呈 现 不 同 的 效果 。 


13.2.3 ”实例 应 用 


【 例 13-2】 同 一 个 表单 中 制作 特殊 样式 的 文本 框 和 按钮 
(1) 创建 一 个 loginbtn.html 页 面 。 
(2) 为 页 面 定义 一 组 样式 ， 代 码 如 下 : 


inpatetrt  t 
background-color:#F60; 
color:red; 
width:120px; 
border:solid lpx #C6EAE8; 

} 

input.btn { 
background-color:#FFF; 
border:solid lpx #DBDBDB; 
width:80px; 

} 


(3) 在 <body>…</body> 中 添加 如 下 代码 : 


<form class="bg"> 

<div id="apDivl"> 
<input type="text" class="txt"/> 
<div id="divtab"></div> 
<input type="text" o class="txt"/> 

</div> 

<div id="apDivbtn"> 
<input type="button"” value=" 确 定 " class="btn" /> 
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<input type="button" value=" 取 消 " class="btn"/> 
</div> 
</form> 
(4) body 元 素 里 面 为 id 设置 的 样式 代码 本 例 中 不 做 解释 。 
(5) 保存 修改 的 代码 。 


13.2.4 ”运行 结果 


直接 打开 浏览 器 运行 上 述 代码 ， 显 示 的 效果 如 图 13-5 所 示 。 


图 13-5 对 “输入 框 ”和 “按钮 ”应 用 不 同样 式 的 效果 


13.2.5 ”实例 分 析 


应 源码 解析 : 


我 们 以 前 学 过 类 样式 表 ， 在 style 元 素 中 定义 一 个 类 样式 ， 在 用 到 此 样式 时 ， 通 过 class 调 
用 。 现 在 我 们 为 不 同类 型 的 元 素 设置 样式 与 类 样式 表 颇 为 相似 ， 都 需要 用 class 来 调用 ， 只 是 
在 类 样式 表 的 前 面 需要 加 上 表单 元 素 。 这 样 表单 就 适应 多 种 不 同类 型 的 数据 类 型 了 。 


13.3 创建 与 文档 同行 的 搜索 框 


表单 和 段落 相似 ， 默 认 的 情况 下 将 以 新 行 显示 ， 这 一 点 很 受 我 们 欢迎 。 但 有 时 我 们 希望 在 
一 个 标题 之 后 添加 一 个 表单 ， 例 如 : 某 购物 网 站 头 部 的 右上 角 会 显示 一 个 搜索 框 。 
下 面 我 们 就 来 看 一 下 这 样 的 效果 是 如 何 实现 的 。 


< 视频 教学 : 光盘 /视频 /13/13.3 ”创建 与 文档 同行 的 搜索 框 -avi @@ 长 度 : 2 分钟 
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13.3.1 基础 知识 一 一 避免 表单 创建 额外 的 空格 和 换行 符 


在 div 元 素 中 ， 如 果 想 让 内 容 在 同一 行 显示 ， 只 需要 将 div 的 display 属性 值 设置 为 inline 
就 可 以 了 。 当 然 对 于 表单 来 说 ， 我 们 也 可 以 设置 它 的 display 属性 值 。 
例如 : 


<style type="text/css"> 
form { 


display:inline; 
上 
</style> 


13.3.2 ”实例 描述 


在 浏览 购物 网 站 时 ， 为 了 使 用 方便 , 我们 总 是 在 右上 角 的 搜索 框 里 搜索 商品 。 同 时 我 们 也 
注意 到 : 这 些 网 站 上 的 搜索 框 都 是 紧 挨 着 图 片 或 者 文档 的 ， 看 起 来 让 人 赏心悦目 。 但 是 如 果 再 
换行 显示 ， 不 太 符合 页 面 的 整体 效果 。 

下 面 将 介绍 一 个 很 简单 的 例子 ， 让 我 们 来 研究 一 下 设置 display 属性 和 不 设置 display 属性 
的 区 别 。 


13.3.3 ”实例 应 用 


【 例 13-3】 创 建 与 文档 同行 的 搜索 框 
(1) 创建 一 个 名 为 inline.html 的 页 面 。 
(2) 为 inline.html 中 的 form 表单 定义 样式 ， 代 码 如 下 : 


<style> 

formt{ 
display:inline;} 

form input { 
border:lpx solid #FFF; 
background-color:#FFF; 


} 

-bg { 
background-image:url (img/inline.jpg); 
background-repeat:no-repeat; 
width:803px; 
height:431px; 

} 

#apDivl { 


position:relative; 
width:798px; 
height:38px; 
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padding-top:30px; 
: 
</style> 


(3) 在 body 元 素 中 添加 如 下 代码 : 


<div id="apDivl"> <font color="#FFFFFF">You are not Logged in! Log in to check 
your messages. 键入 关键 字 搜 索 你 想 要 的 文章 : </font> 
<form> 
<input type="text"/> 
<input type="submit" value=" 搜 索 "/> 
</form> 
</div> 


(4) 保存 修改 的 代码 ， 查 看 运行 结果 。 


13.3.4 ”运行 结果 


使 用 浏览 器 直接 打开 文件 名 为 inline.html 的 页 面 ， 运 行 的 结果 如 图 13-6 所 示 。 


YOUR COMPANY NAME 


13-6 设置 display 属性 值 为 inline 显示 的 效果 
如 果 我 们 不 设置 display 属性 ， 运 行 的 结果 如 图 13-7 所 示 。 


YOUR COMPANY NAME 


了 


13-7 ”没有 设置 display 属性 显示 的 效果 
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13.3.5 ”实例 分 析 


a 


当 我 们 解决 问题 没有 头绪 时 , 往往 会 把 问题 看 得 很 难 , 但 是 有 的 问题 只 需要 设置 一 个 属性 ， 
就 会 柳暗花明 。 如 果 我 们 没 设置 form 表单 的 display 属性 ， 是 不 是 就 需要 借用 div 元 素 ， 然 后 
将 form 元 素 庶 套 在 里 面 ， 才 能 实现 与 文档 同行 的 搜索 框 。 所 以 ,设置 form 表单 的 display 属 
性 既 可 使 代码 简洁 又 避免 了 表单 创建 额外 的 空格 和 换行 符 。 


13.4 ”对 相关 的 字段 进行 分 组 


我 们 在 填写 简历 时 ， 会 发 现在 第 一 步 “ 基 本 信息 ”中 的 “联系 方式 ”包含 了 电子 信箱 、 个 
人 主页 、 邮 政 编码 、 通 信 地 址 等 信息 。 对 于 这 个 包含 大 量 字段 的 表单 而 言 使 用 了 分 区 显示 ， 更 
好 地 展现 了 信息 间 的 关系 ,使 访问 者 能 够 了 解 到 哪些 问题 是 有 关联 的 。 那 么 我 们 用 什么 方法 来 
实现 类 似 的 效果 呢 ? 

下 面 我 们 来 介绍 如 何 对 相关 字段 进行 分 组 。 


oS 视频 教学 : 光盘 /视频 /13/13.4 ”对 相关 的 字段 进行 分 组 .av @@ 长 度 : 3 分钟 
13.4.1 基础 知识 一 一 fieldset 元 素 
<fieldset> 和 <legend> 标 签 可 以 将 表单 中 相关 联 的 信息 分 成 不 同 的 组 ， 而 它 的 使 用 方法 很 简 


单 ， 只 需 简 单 地 把 相关 的 字段 放 在 同一 个 <fieldse 人 > 标签 中 , 并 在 <fieldse 刀 开始 标签 后 放置 一 个 
用 来 说 明 分 组 标题 的 <legend> 标 签 。 


13.4.2 ”实例 描述 


有 一 个 登录 窗口 ， 在 上 面 除了 需要 显示 登录 的 基本 信息 之 外 ， 还 需要 注意 ;如 果 用 户 忘 记 
密码 或 者 看 不 清 验证 码 ， 应 该 怎么 办 呢 ? 在 这 种 情况 下 ， 对 字段 进行 分 组 无 疑 是 最 好 的 选择 。 
下 面 我 们 就 来 学 习 一 个 这 样 的 例子 。 


13.4.3 ”实例 应 用 


【 例 13-4】 对 相关 的 字段 进行 分 组 
(1) 创建 一 个 名 称 为 fieldset.html 的 页 面 。 
(2) 为 说 明 分 组 的 标题 <legend> 标 签 设置 样式 ， 其 代码 如 下 : 
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<style> 

form div { 
width:219px; 

} 

form fieldset { 
width:219px; 

} 

form legend { 
color:#999; 
font-size:12px; 

让 


</style> 
(3) 在 <body> 标 签 中 填 入 如 下 代码: 
<form> 

<fieldset> 


<legend> 基 本 信息 </legend> 

<div><img src="img/fieldset.jpg" /></div> 
</fieldset> 
<fieldset> 

<legend> 其 他 信息 </legend> 

<div><img src="img/fieldset2.jpg" /></div> 
</fieldset> 

</form> 


(4) 保存 修改 的 代码 ， 查 看 其 运行 的 结果 。 


13.4.4 ”运行 结果 


使 用 浏览 器 直接 打开 名 为 fieldset.html 的 页 面 ， 效 果 如 图 13-8 所 示 。 


13-8 ”使 用 <fieldset> 标 签 分 组 的 效果 


环 二 mm 


二 开发 学 习 实录 .入 


13.4.5 ”实例 分 析 


ee 


通过 该 实例 可 以 看 出 ，<fieldsetf> 标 签 的 用 法 其 实 很 简单 ， 只 需 将 想 要 显示 的 内 容 放 在 
<fieldset> 标 签 中 即 可 ， 然 后 再 使 用 <legend> 标 签 说 明 一 下 分 组 的 标题 ， 这 样 一 个 完整 的 分 组 就 
实现 了 。 


13.5 ”为 快捷 键 提示 信息 设置 样式 


我 们 通常 都 非常 喜欢 使 用 快捷 键 ， 因 为 纯 键盘 的 操作 会 在 一 定 程度 上 提高 工作 效率 ; 特别 
对 于 那些 应 用 鼠标 不 太 灵活 甚至 无 法 使 用 鼠标 的 用 户 而 言 是 很 有 帮助 的 。 对 于 我 们 而 言 ， 通 
过 快捷 键 可 以 快速 地 定位 文档 某 个 内 容 或 者 访问 一 个 连接 ， 而 所 要 做 的 工作 仅仅 是 同时 按 下 
Alt( 或 者 类 似 的 键 ) 和 其 他 特定 键 。 但 我 们 必须 先 要 让 用 户 知道 这 个 特定 键 是 什么 。 

下 面 我 们 就 来 看 一 下 如 何 设置 这 个 特定 键 。 


ce 视频 教学 : 光盘 /视频 /13/13.5 为 快捷 键 提 示 信 息 设 置 样式 .avi OO 长 度 : 5 分 名 
13.5.1 基础 知识 一 一 accesskey 属性 
在 操作 系统 中 ， 通 常 在 快捷 键 对 应 的 字母 下 面 添加 一 个 下 划 线 。 例 如 在 Windows 中 同时 


按 下 AlttF 组 合 键 就 能 打开 “文件 ”下 拉 菜 单 ， 而 这 是 通过 在 File 中 的 字母 “F” 的 下 面 添加 
下 划 线 来 提示 用 户 的 ， 如 图 13-9 所 示 。 


13-9 ”快捷 键 对 应 字母 下 面 有 下 划 线 
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我 们 在 网 站 中 也 可 以 使 用 类 似 的 方法 , 在 作为 快捷 键 的 字符 下 面 添加 下 划 线 。 代 码 如 下 所 示 : 


<style> 


-akey{ 
text-decoration:underline;} 
</style> 


接着 为 快捷 键 选择 字符 ， 代 码 如 下 : 
<span class="akey">p</span> 


要 想 实现 表单 的 快捷 键 功能 ， 只 需 通过 accesskey 属性 设置 我 们 选择 作为 快捷 键 的 字符 
即 可 。 


13.5.2 ”实例 描述 


对 于 一 个 初学 电脑 ， 对 操作 鼠标 不 太 灵活 甚至 不 懂 的 用 户 来 说 ， 使 用 键盘 操作 无 疑 是 最 好 
的 方法 。 注 册 用 户 信息 时 ， 我 们 可 以 使 用 户 通 过 按 一 个 键 的 方法 直接 跳 转 到 表单 上 ， 然 后 按 另 
一 个 键 直接 跳 转 到 表单 的 第 一 个 元 素 中 。 这 对 使 用 这 种 功能 的 用 户 来 说 是 不 会 陌生 的 。 

下 面 的 例子 就 很 好 地 说 明了 这 一 点 。 


13.5.3 ”实例 应 用 


【 例 13-S】 为 快捷 键 提示 信息 设置 样式 
(1) 创建 一 个 名 为 tabcontact.html 的 页 面 。 
(2) 为 表示 的 快捷 键 定义 一 个 样式 ， 代 码 如 下 : 


<style> 
form input{ 

width:200px; 
height:15px;} 

.akey{ 
text-decoration:underline; 
color:#666; 

} 
</style> 


(3) 以 上 样式 仅 给 出 了 主要 的 样式 代码 ， 如 何 布局 在 这 里 不 再 详细 讲解 。 
(4) 接着 在 <body> 标 签 中 添加 代码 ， 如 下 所 示 : 


<form class="bg"> 

<div id="apDivl"> <select accesskey="p"> 

<input type="text" accesskey="p"/> 

<textarea cols="50" rows="10" accesskey="p"></textarea> 
</div> 

</select> 


(5) 以 上 代码 主要 是 设置 <input> 标 签 里 面 的 属性 accesskey 值 。 
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(6) 保存 修改 后 的 代码 。 


13.5.4 ”运行 结果 


使 用 浏览 器 直接 打开 文件 名 为 tbcontact.html 的 页 面 ， 看 到 的 效果 如 图 13-10 所 示 。 


TF 
的 入 择 : 


图 13-10 ”使 用 浏览 器 打开 后 看 到 的 效果 图 
按 下 AlttP 组 合 键 ， 效 果 如 图 13-11 所 示 。 


宣 羽球 天。 | 匡 为 以 娃 刍 提示 信息 设 亚 衬 式 


p 
+ 疙 们 可 要 绝情 入 cL 下 俩 息 
记 的 基 标 国 


再 次 按 下 Alt+P 组 合 键 ， 效 果 如 图 13-12 所 示 。 


me 人 >> 


3 E73 ET 


图 13-12 焦点 落 到 表单 的 第 四 个 元 素 上 的 效果 


13.5.5 ”实例 分 析 


6 源码 解析 : 


在 本 浏览 器 中 是 使 用 Alt 键 作为 快捷 键 ， 而 在 Firefox 浏览 器 中 则 是 使 用 Alt+Shift 组 合 
键 。 所 以 并 非 所 有 的 浏览 器 都 是 以 相同 的 方式 支持 快捷 键 的 。 但 是 都 允许 用 户 配 置 自己 的 快捷 
键 组 合 。 


13.6 制作 不 同 背 景 的 下 拉 菜 单 


在 前 面 的 章节 中 ， 我 们 学 习 了 为 select 菜单 设置 背景 颜色 的 方法 ， 但 如 何 使 用 不 同 颜色 来 
显示 菜单 中 的 不 同 选项 呢 ? 
下 面 我 们 就 来 学 习 ， 如 何 使 用 CSS 为 不 同 的 选项 设置 不 同 的 背景 色 。 


8 视频 教学 ， 光盘/ 视频 /13/13.6 ”制作 不 同 背景 的 下 拉 菜 单 avi @k 度 : 4 分 钟 


13.6.1 基础 知识 一 一 使 用 不 同 背景 强调 select 下 拉 菜 单 


在 以 往 的 菜单 中 , 我 们 只 是 为 菜单 添加 背景 色 , 却 没 试 过 为 不 同 的 选项 设置 不 同 的 背景 色 。 
那么 用 什么 方法 来 实现 这 种 效果 呢 ? 

因为 color 和 background-color 属性 是 菜单 中 唯一 可 自 定 义 的 属性 , 所 以 我 们 可 以 为 各 个 菜 
单项 指定 不 同 的 类 ， 来 对 其 应 用 多 种 不 同 的 背景 颜色 。 

下 面 我 们 来 了 解 一 下 是 如 何 设置 的 ， 代 码 如 下 : 


-Teqcssif 


background-color:#F00; 
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Color:#FFF;} 

-greencsst{ 
background-color:green; 
color:#000;} 

.huangcss{ 
background-color:#FF0; 
color:#06F;} 

.bluecss{ 
background-color:blue; 
color:#0F0;} 


13.6.2 ”实例 描述 


为 不 同 的 下 拉 菜 单 设置 不 同 的 背景 色 的 确 不 经 常 使 用 ， 但 是 也 不 排除 使 用 的 可 能 ， 
了 那 万 分 之 一 的 可 能 ， 来 学 习 一 下 也 是 一 个 很 不 错 的 选择 。 
下 面 我 们 来 看 一 下 select 菜单 中 所 显示 的 不 同 颜色 。 


13.6.3 ”实例 应 用 


【 例 13-6】 制 作 不 同 背 景 的 下 拉 菜 单 
(1) 创建 一 个 名 为 select.html 的 页 面 。 
(2) 为 select 菜单 定义 不 同 的 背景 色 ， 代 码 如 下 : 
<style> 

.redcsst{ 
background-color:#F00; 
Color:#FFF;} 

.greencsst{ 
background-color:green; 
color:#000;} 

.huangcsst{ 
background-color:#FFO; 
color:#06F;} 

.bluecss{ 
background-color:blue; 
color:#0F0;} 

</style> 


(3) 页 面 布局 ， 在 这 里 就 不 给 出 样式 了 。 
(4) 在 <body> 标 签 中 添加 页 面 代码 ， 如 下 所 示 : 


<form class="bg"> 
<div idq="apDiVI"> 
<select> 
<option selected="selected" class="redcss"” > 网 站 管理 </option> 
<option value="domain" class="huangcss"> 域 名 管理 </option> 


所 以 为 
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<option value="mail"” class="greencss"> 邮 局 管理 </option> 
<option value="database" class="bluecss"> 数 据 库 管理 </option> 
</select> 
</div> 
</form> 


(5) 保存 修改 后 的 代码 。 


13.6.4 ”运行 结果 


打开 浏览 器 ,在 浏览 器 中 运行 保存 后 的 selecthtml 文件 ， 效 果 如 图 13-13 和 图 13-14 所 示 。 


- Windovs Internet Ex... 攻关 | 区 


合同 er\yt\slect htal | GO ravi\seet hal x 


窗 收藏 天 大 制作 不 同 背景 的 下 拉 荣 单 宽 收藏 天 。 和 同 制 作 不 同 背景 的 下 拉 荣 单 


图 13-13 ”背景 颜色 效果 图 图 13-14 不 同 的 背景 色 效果 


13.6.5 “实例 分 析 


应 源码 解析 : 


如 果 要 为 select 菜单 中 的 不 同 选项 设置 不 同 的 字体 ， 这 样 的 效果 就 不 能 实现 。 因 为 color 
和 background-color 属性 是 菜单 中 唯一 可 自 定 义 的 属性 。 所 以 只 有 字体 的 颜色 和 背景 色 可 以 定 
义 ， 其 他 的 都 不 行 。 


13.7 ”强调 显示 当前 焦点 字段 


在 Excel 表格 中 ， 当 我 们 单 击 某 个 字段 或 者 用 Tab 键 切换 时 将 强调 显示 当前 的 焦点 字段 ， 
那么 我 们 在 Web 中 能 否 用 CSS 实现 类 似 的 效果 呢 ? 


Eco | 
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下 面 我 们 来 看 一 下 如 何 用 CSS 强调 用 户 单 击 的 表单 字段 。 
上 视频 教学 : 光盘 /视频 /13/13.7 强调 显示 当前 焦点 字段 .avi @O 长 度 : 4 分 名 
13.7.1 基础 知识 一 一 强调 用 户 单 击 的 表单 字段 


前 面 我 们 学 习 了 CSS 伪 类 , 那么 这 里 通过 :focus 伪 类 可 以 实现 强调 显示 用 户 单 击 的 表单 字 
段 的 效果 。 


这 种 效果 在 IE8 浏览 器 中 可 以 实现 ， 但 对 于 应 用 更 加 广泛 的 IE6 浏览 器 而 言 是 无 
注意 | ”法 实现 的 。 


我 们 以 IE8 浏览 器 中 显示 的 效果 为 例 ， 为 表单 字段 定义 样式 ， 代 码 如 下 : 
<style type=text/css> 
form input{ 
border:2px solid #FFF; 
} 
form input:focus{ 
border:2px solid #00F; 
background-color:#F00; 
i 
</style> 


正如 我 们 上 面 提 到 的 ，IE6 浏览 器 的 应 用 范围 更 加 广泛 ， 但 下 6 浏览 器 并 不 支持 focus 伪 
类 ， 所 以 对 于 大 多 数 浏览 器 用 户 而 言 是 看 不 到 这 样 的 效果 的 。 


13.7.2 ”实例 描述 


我 们 在 注册 或 者 登录 时 ， 会 习惯 性 地 按 下 Tab 键 ， 来 使 表单 中 的 下 一 个 字段 获得 焦点 。 为 
了 分 辨 此 字段 是 否 选中 ， 通 常会 改变 选中 的 表单 字段 的 样式 。 
我 们 来 看 一 下 这 个 例子 。 


13.7.3 ”实例 应 用 


【 例 13-7】 强 调 显示 当前 焦点 字段 

(1) 创建 一 个 tabfocus.html 的 页 面 。 

(2) 在 <style> 标 签 中 添加 样式 ， 代 码 如 下 所 示 : 

<style> 

-bg { 
background-image:url (13-1.JPG); 
background-repeat:no-repeat; 
vertical-align:middle; 


background-position:center; 


至 
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width:781px; 
height:171lpx; 


! 

#apDivl { 
position:relative; 
width:205px; 
height:20px; 
padding-left:210px; 
padding-top:130px; 


form input{ 
border:2px solid #FFF; 
} 
form input:focus{ 
border:2px solid #00F; 
background-color:#F00; 
} 
</style> 


(3) 在 <body> 标 签 中 添加 的 代码 如 下 所 示 : 


<form class="bg"> 

<div id="apDivl"> 
<input type="text" style="width:65px;"/> 
&nbsp; gnbsp’; Enbsp; gnbsp’; Enbsp; gnbsp; gnbsp; gnbsp; tnbsp; tnbsp; 
<input type="text" style="width:65px;"/> 

</div> 

</form> 


(4) 保存 修改 后 的 代码 。 
13.7.4 ”运行 结果 


.在 IE8 浏览 器 中 打开 文件 名 为 tabfocus.html 的 页 面 ， 初 始 状 态 的 效果 如 图 13-15 所 示 。 


BF \dey\zt\tabfocus htnl 


| 着 强 交 显示 当前 焦点 字 自 


图 13-15 默认 的 效果 
单 击 “ 用 户 名 称 ” 输 入 框 时 ， 效 果 如 图 13-16 所 示 。 
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图 13-16 “用 户 名 称 ” 的 输入 框 获 得 焦点 时 的 效果 


13.7.5 ”实例 分 析 


Cn 


对 于 :focus 伪 类 ，IE8 浏览 器 能 够 完全 支持 ， 但 IE6 浏览 器 却 不 支持 。 所 以 ， 我 们 在 以 后 
碰 到 不 显示 效果 的 情况 时 ， 不 要 盲目 地 从 代码 中 查找 错误 ， 首 先 要 搞 清楚 浏览 器 是 否 支持 。 


13.8 ”常见 问题 解答 


13.8.1 HTML 中 的 fieldset 的 问题 


HTML 中 fieldset 的 问题 。 
-会 吓 。 网 络 课堂 : http://bbs.itzen.com/thread-11630-1-1.html 


对 于 这 样 一 段 代码 : 


<form action="dreamdu.php" method="post" id="dreamduform"> 
<fieldset> 
<legend> 用 户 名 与 密码 :</legend> 
<input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" /> 
<label for="username"> 用 户 名 :</label> 
<input type="text" id="username" name="username" value="dreamdu" /> 
</fieldset> 
<fieldset> 
<legend> 性 别 :</legend> 
<label for="boy"> 男 </label> 
<input type="radio" value="1" id="sex" name="sex" /> 
<label for="girl"> 女 </label> 
<input type="radio" value="3" id="sex" name="sex" /> 
</fieldset> 
</form> 
</body> 


sé >> 
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我 怎样 才能 将 两 个 fieldset 之 间 空 出 一 两 行 的 距离 呢 ? 


【解决 办 法 】 要 解决 这 个 问题 ， 有 一 个 很 简单 的 办 法 ， 完 全 不 需要 再 嵌 套 表格 ， 而 只 需要 
在 style 元 素 里 面 定义 div 元 素 的 高 度 即 可 ， 代 码 如 下 : 
#divTab { 
height:8px; 


} 
然后 在 </fieldset> 和 <fieldset> 标 签 中 添加 <div id="divTab"></div>， 代 码 如 下 : 


</fieldset> 
<div id="divTab"></div> 
<fieldset> 


这 样 ， 你 想 让 两 个 fieldset 之 间 空 出 几 行 就 能 空 出 几 行 了 。 
13.8.2 ”如 何 使 用 accesskey 的 问题 


在 HTML 中 如 何 使 用 accesskey 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-11631-1-1.html 


表单 元 素 中 有 个 <label></label> 表 单元 素 ， 听 说 是 用 来 设置 表单 元 素 快捷 键 的 ， 哪 位 高 手 

能 给 俺 指点 一 下 啊 ? 
【解决 方法 】 我 们 以 正 8 浏览 器 为 准 。 

<label> 

标识 有 两 个 属性 , 一 个 是 FOR, 一 个 是 ACCESSKEY。FOR 的 意思 是 , 这 个 Label 是 为 哪个 元 件 服务 的 ? 

而 ACCESSKEY 则 定义 了 访问 这 个 元 件 的 热 键 。 比 如 ， 有 一 个 名 字 叫 Name 的 单行 输入 框 ， 我 们 是 这 样 

定义 这 个 元 件 的 : 

<input type="TEXT" id="Name" size=30> 

， 那么 ， 我 们 的 

<label> 

可 以 如 此 定义 : 

<label for="Name" accesskey="N"> 姓 名 (<U>N</U>): </label> 

。 大 家 可 以 看 见 ， 这 个 

<labe1l> 是 为 那个 ID 为 “Name” 的 元 件 服务 的 ， 而 RcESSKEY 则 定义 了 访问 这 个 元 件 的 热 键 为 

“Alt+N” 。</label> 


实例 代码 如 下 : 


<FORM> 
<LABEL FOR="Namebox" ACCESSKEY="N"> 姓 名 (<U>N</U>): </LABEL> 
<INPUT TYPE="TEXT" ID="Namebox" SIZE=30> 
<br> 
<LABEL FOR="Emailbox" ACCESSKEY="E"> 电 子 邮 件 (<U>E</U>): </LABEL> 
<INPUT TYPE="TEXT" ID="Emailbox" SIZE=30> 
<br> 


< 全 一 


<LABEL FOR="Phonebox"” ACCESSKEY="P"> 联 系 电话 (<U>P</U>) : </LABEL> 

<INPUT TYPE="TEXT" ID="Phonebox" SIZE=30> 

<br> 

<LABEL FOR="areabox" ACCESSKEY="S" > 留 言 (<U>S</U>): </LABEL> 

<TEXTAREA ID="areabox" COLS="30" ROWS="3"></TEXTAREA> 

<br> 

<input type="CHECKBOX" id="check3" value="often" name="checkoften"> 

<label for="check3"” ACCESSKEY="H"> 经 常 来 这 里 (<U>H</U>) </1label> 

<input type="CHECKBOX" id="check4" value="seldom" name="checkseldom"> 

<label for="check4"” RCCESSKEY="L"> 偶 尔 来 看 看 (<U>L</U>) </1abel> 
</FORM> 


保存 以 上 代码 。 查 看 运行 效果 。 


13.9 习 题 


1. 填空 题 

(1) 在 formm 表单 中 ， 属性 用 于 设置 表单 和 文档 在 同一 行 显示 。 

(2) 为 表单 中 的 相关 的 字段 进行 分 组 ， 我 们 需要 使 用 元 素 。 

(3) 想 要 实现 表单 的 快捷 键 功能 ， 只 需 为 属性 设置 我 们 选择 作为 快捷 键 的 字符 

(4) 在 为 form 表单 中 的 下 拉 菜 单 的 内 容 设置 不 同 的 样式 时 ，color 和 属性 是 菜 
单 中 唯一 可 自 定义 的 属性 。 


(5) 假设 有 一 个 文本 框 ， 代 码 如 下 所 示 : 


<input type="text" /> 


当 这 个 文本 框 获得 焦点 时 ， 使 文本 框 的 边框 和 背景 颜色 为 蓝 色 ， 字 体 为 白色 ， 应 该 使 用 的 


代码 是 


2. 选择 题 


(1) 假设 一 个 表单 中 有 一 个 文本 框 和 一 个 按钮 ， 分 别 为 它们 设置 不 同 的 样式 ， 调 用 的 代码 


如 下 所 示 : 


ed) >> 


<input type="text" class="TXT" /> 
<input type="Submit" class="BTN" /> 


为 此 表单 设置 的 样式 正确 的 是 


input: TXT{border:thin solid #00F;} 
input: BTN{background-color:#00F; color:#FFF;} 


input TXT{border:thin solid #00F;} 
input BTN{background-color:#00F;color:#FFF;} 


C. 
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input -TXT{border:thin solid #00F;} 


input .BTN{background-color:#00F;color:#FFF;} 
DD. 


input.TXT{border:thin solid #00F;} 
input.BTN{background-color:#00F;color:#FFF;} 
(2) 在 form 表单 中 ， 用 于 设置 表单 和 文档 在 同一 行 显示 。 
A. display: inline B. display: inline-block 
C. display: inline-table D. display: block 
(3) 下 面 项 是 对 相关 的 表单 字段 进行 分 组 的 。 
A. legend B. accesskey C. fieldset D. span 
(4) 假设 要 设置 一 个 类 似 文本 的 按钮 ， 正 确 的 是 
A. background:transparent; border: 0; padding: 0; 
B. background-color: transparent; border: 0; padding: 0; 
C. background: white; border: 0; padding: 0; 
D. backgorund-color: white; border: 0; padding: 0; 


3. 上 机 练习 

上 机 练习 : 制作 特色 的 登录 窗口 

通过 本 章 的 学 习 ， 我 们 对 使 用 CSS 为 表单 元 素 设置 样式 有 了 进一步 的 了 解 。 强 调 显示 当 
前 焦点 字段 、 制 作 不 同 背 景 的 下 拉 菜 单 等， 都 是 经 常用 到 的 ， 那 么 本 次 的 上 机 练习 也 是 针对 这 
些 样式 的 。 

本 次 练习 主要 实现 ， 当 焦点 选中 文本 框 时 ， 边 框 样式 为 细 边 框 ， 边 框 颜色 、 背 景色 均 为 蓝 


加 是 口 否 
EM es3 = HE 


适当 作 玫 民 页 过 同性 法 必 和 问世 页 


EE PE 王 ET 和 


13-17 ”强调 显示 当前 的 焦点 字段 图 13-18 不 同 背景 颜色 的 下 拉 菜 单 


< 
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内 容 摘 要 : 

CSS 技术 在 页 面 基 础 样式 上 具有 很 好 的 控制 能 力 ， 并 且 具 备 很 好 的 易 用 性 和 扩展 性 ， 这 使 
得 它 在 控制 页 面 的 同时 ， 还 能 对 页 面 及 其 元 素 进行 优化 。 

随 着 网 页 设计 技术 的 发 展 ， 人 们 已 经 不 能 仅仅 满足 于 单调 地 展示 页 面 布局 ， 而 是 希望 在 页 
面 中 能 够 加 入 一 些 多 媒体 特效 而 使 页 面 丰富 起 来 。 使 用 CSS 滤 镜 就 能 够 实现 这 些 需求 ， 它 能 
够 产生 各 种 各 样 的 文字 或 图 片 特 效 ， 从 而 大 大 地 提高 了 页 面 的 吸引 力 。 

本 章 将 为 大 家 介绍 CSS 中 的 滤 镜 特效 。 

学 习 目 标 : 

@ 掌握 CSS 滤 镜 特效 

@ ”熟练 应 用 CSS 滤 镜 特效 

@ 掌握 如 何 使 用 鼠标 属性 


14.1 滤 镜 特效 


从 Internet Explorer 4.0 开始 ， 浏 览 器 便 开 始 支持 多 媒体 滤 镜 特效 ， 允 许 使 用 简单 的 代码 就 
能 对 文本 和 图 片 进行 处 理 。 比 如 模糊 、 彩 色 投 影 、 火 焰 效 果 、 图 片 倒置 、 色 彩 渐变 、 风 吹 效 果 
和 光 晕 效果 等 。 当 把 滤 镜 和 渐变 结合 运用 到 网 页 脚本 语言 中 , 就 可 以 建立 一 个 动态 交互 的 网 页 。 
滤 镜 特效 在 Web 开发 中 是 必 不 可 少 的 ， 不 仅 结合 网 页 脚本 语言 能 够 实现 滤 镜 特效 ，CSS 
在 控制 页 面 布局 的 同时 ， 也 提供 了 多 种 内 置 的 滤 镜 特效 。 使 用 这 种 技术 可 以 把 可 视 化 的 滤 镜 和 
转换 效果 添加 到 页 面 元 素 上 。CSS 的 滤 镜 属性 的 标识 符 是 filter， 它 的 语法 格式 如 下 : 
filter:filtername (parameters) 


filtemame 是 要 使 用 的 滤 镜 名 称 ， 如 Alpha、DropShadow 等 ， 如 表 14-1 所 示 列 出 了 几 种 常 
用 的 滤 镜 名 称 。parameters 指定 了 该 滤 镜 中 的 各 参数 ， 通 过 这 些 参数 才能 够 决定 滤 镜 显 示 的 


效果 。 
表 14-1 CSS 滤 镜 
滤 镜 名 称 效 果 
Alpha 设置 透明 度 
BlendTrans 实现 图 像 之 间 的 淡 入 和 淡出 的 效果 
Blur 建立 模糊 效果 
Chroma 设置 对 象 中 指定 的 颜色 为 透明 色 
DropShadow 建立 阴影 效果 
FlipH 将 元 素 水 平 翻转 
FlipV 将 元 素 垂直 翻转 
Glow 建立 外 发 光 效 果 
Gray 灰 度 显示 图 像 ， 即 显示 为 黑白 图 像 
Invert 图 像 反 相 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 类 似 底片 效果 
Light 设置 光源 效果 
Mask 建立 透明 遮 单 
RevealTrans 建立 切换 效果 
Shadow, 建立 另 一 种 阴影 效果 
Wave 波纹 效果 
Xray, 显现 图 片 的 轮廓 ， 类 似 于 XX 光 片 效果 


， 车 使 用 多 个 江 镜 ， 则 每 个 滤 镜 之 间 用 空格 分 隔 ; 一 个 滤 镜 中 的 若干 个 参数 用 到 号 
提示 | ”分 隔 ;filter 属性 和 其 他 样式 属性 并 用 时 以 分 号 分 隔 。 
随 着 样式 表 技术 的 不 断 成 熟 ， 其 支持 的 滤 镜 种 类 及 功能 也 逐渐 增多 。 用 户 如 果 能 够 热 练 地 
应 用 这 些 滤 镜 ， 设 计 出 的 网 页 便 会 产生 意 想不到 的 效果 。 


mt >> 
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14.2 制作 文字 、 图 像 透 明 特效 


当 需 要 把 一 张 图 片 放 在 页 面 中 时 ， 也 许 会 感觉 很 不 “ 爽 ”: 白色 的 背景 上 面 放 着 一 张 黑色 
的 图 片 ， 给 人 一 种 “格格 不 入 ”的 感觉 。 那 么 ， 如 何 解决 这 个 问题 呢 ? CSS 中 的 Alpha 滤 镜 可 


以 将 页 面 元 素 与 背景 混合 ， 从 而 解决 这 个 问题 。 下 面 讲述 Alpha 的 滤 镜 特效 。 
上 视频 教学 : 光盘 /视频 /14/ 14.2 制作 文字 、 图 像 透明 特效 avi 。。 长度: 5 分 名 


14.2.1 基础 知识 一 一 Alpha 滤 镜 


Alpha 滤 镜 是 将 页 面 元 素 与 背景 混合 ， 从 而 产生 透明 渐变 的 效果 。 而 且 可 以 通过 改变 数值 
来 控制 透明 度 。 如 果 将 Alpha 滤 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参数 ， 就 能 使 图 像 显 
示 淡 入 淡出 的 效果 。 

Alpha 滤 镜 的 语法 格式 如 下 : 

{filter : Alpha ( enabled=bEnabled, style=iStyle, opacity=iOpacity, 

finishOpacity=iFinishOpacity, 

startx=iPercent, starty=iPercent, finishx=iPercent, 
finishy=iPercent )} 


各 参数 如 表 14-2 所 示 。 
表 14-2 Alpha 滤 镜 参数 


参 数 说 明 


enabled 设置 滤 镜 是 否 激活 

i 设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 0~3。0 表示 无 渐变 ，1 表示 
线形 渐变 ，2 表示 圆 形 渐变 ，3 表示 矩形 渐变 

opacity 设置 透明 度 ， 值 范围 是 0 一 100。0 表示 完全 透明 ，100 表示 完全 不 透明 

finishOpacity 设置 结束 时 透明 度 ， 值 范围 也 是 0 一 100 

startx 设置 透明 渐变 开始 点 的 水 平 坐标 ( 即 x 坐标 ) 

starty 设置 透明 渐变 开始 点 的 垂直 坐标 ( 即 y 坐标 ) 

finishx 设置 透明 渐变 结束 点 的 水 平 坐标 

finishy 设置 透明 渐变 结束 点 的 垂直 坐标 


下 面 为 一 幅 名 为 1401 的 GIF 格式 的 图 片 设置 透明 渐变 ，XHTML 代码 如 下 : 


<img src="1401.gif" width="150px" height="220px" 
style="filter:Alpha (opacity=60, style=0)" /> 
<img src="1401.gif" width="150px" height="220px" 
style="filter:Alpha (opacity=60, style=1)" /> 


< 


二 了 开发 学 习 实录 .和 


<img src="1401.gif" width="150px" height="220px" 
style="filter:Alpha (opacity=60, style=2)" /> 
<img src="1401.gif" width="150px" height="220px" 
style="filter:Alpha (opacity=60, style=3)" /> 


在 代码 中 设置 透明 度 为 60， 并 且 要 求 显示 各 渐变 样式 ， 在 浏览 器 中 查看 滤 镜 效果 ， 如 
图 14-1 所 示 。 


图 14-1 Alpha 滤 镜 特效 


在 使 用 Alpha 滤 镜 时 要 注意 以 下 两 点 。 

@ ”由 于 Alpha 滤 镜 使 当前 元 素 部 分 透明 ,使 元 素 下 层 内 容 的 颜色 对 整个 效果 起 着 重要 的 
作用 ， 因 此 颜色 的 合理 搭配 相当 重要 。 

@ 透明度 的 大 小 要 根据 具体 情况 仔细 调整 ， 取 一 个 最 佳 值 。 


14.2.2 ”实例 描述 


我 一 个 朋友 开 宠 物 店 的 ， 他 雇佣 了 一 个 程序 员 给 他 做 宠物 网 站 。 今 天 ， 我 闲 着 无 事 就 去 他 
的 宠物 店 找 他 ， 他 告诉 我 说 : “这 个 程序 员 真 不 行 ， 我 让 他 给 我 做 一 个 页 面 ， 他 给 我 把 一 张 宠 
物 狗 的 图 片 往 页 面 上 一 堆 就 不 管 了 ， 真 是 让 我 头疼 ， 那 页 面 看 得 我 心酸 ， 真 难看 ”， 我 打开 那 
个 程序 员 做 的 网 页 ， 确 实 很 难看 ， 于 是 我 做 了 一 个 Alpha 滤 镜 特效 让 他 看 ， 看 是 否 是 他 想 要 的 
效果 ， 结 果 还 真是 。 下 面 就 一 起 来 做 一 个 宠物 狗 滤 镜 特效 页 面 吧 ! 


14.2.3 ”实例 应 用 


【 例 14-1】 制 作文 字 、 图 像 透明 特效 一 一 宠物 展示 页 面 
(1) 新 建 HTML 文件 ， 命 名 为 14-2.html。 
(2) 在 页 面 中 编辑 文字 、 图 像 的 Alpha 特效 。 完 整 代码 如 下 : 
<body style="background-image:url (images/2008122717592193.jpg)"> 
<div> 
<p style="filter:alpha (opacity=60, style=2) "> 漂亮 宝贝 </p> 
</div> 
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<img src="images/9b8e04dd437881e3cc11660b-jpg" width="200px" 
height="240px" /> 
<img src="images/9b8e04dd437881le3cc11660b.jpg" width="400px" 
height="480px" style="filter:alpha (opacity=60, style=2)" /> 
</body> 
上 面 代 码 中 的 背景 图 片 (images/2008122717592193.jpg) 是 黑色 的 ， 宠 物 狗 图 片 
(images/9b8e04dd437881e3cc11660b.jpg) 是 白色 的 。 为 了 更 全 面 地 让 大 家 认识 到 Alpha 滤 镜 的 应 
特效 ， 先 将 “images/9b8e04dd437881e3cc11660b.jpg” 图 片 不 加 任何 修饰 地 展现 在 页 面 中 ， 
然后 再 对 其 添加 Alpha 滤 镜 特效 。 
(3) 保存 为 14-2.html 页 面 。 


14.2.4 ”运行 结果 


在 浏览 器 中 运行 14-2.html 页 面 ， 效 果 如 图 14-2 所 示 。 


图 14-2 Alpha 滤 镜 特效 


14.2.5 “实例 分 析 


rw, 


在 这 个 实例 中 ,设置 了 “漂亮 宝贝 ”文字 的 透明 度 为 60， 圆 形 渐变 样式 ; 并 设置 了 宠物 狗 
图 像 的 透明 度 也 是 60， 圆 形 渐变 样式 。 当 然 ， 大 家 还 可 以 设置 页 面 对 象 的 结束 透明 度 、 开 始 渐 
变 的 水 平 坐标 和 垂直 坐标 、 结 束 渐 变 的 水 平 坐 标 和 垂直 坐标 等 属性 ， 自 定义 渐变 样式 。 


14.3 ”制作 两 张 图 像 轮换 交替 显示 效果 


还 记得 多 张 图 片 交 蔡 轮换 显示 吗 ? 当时 用 的 可 能 是 Flash 吧 ! 如 果 一 个 页 面 上 使 用 了 Flash 
播放 图 片 ， 那 么 用 户 在 浏览 这 个 网 页 时 ， 他 的 电脑 上 必须 安装 Flash 插件 ， 否 则 网 页 上 的 这 个 


配 


[< 开发 学 习 实录 - 生 


Flash 是 无 法 正常 显示 的 ， 这 个 问题 也 曾经 令 你 苦恼 过 吧 ? 不 用 急 ，CSS 中 的 BlendTrans 滤 镜 
特效 将 会 解决 这 个 问题 。 


和 视频 教学 : 光盘 /视频 /14/14.3 ”制作 两 张 图 像 轮换 交替 显示 效果 .avi 。“@ 长 度 : 4 分 名 


14.3.1 ”基础 知识 一 一 BlendTrans 滤 镜 


BlendTrans 滤 镜 能 够 实现 对 象 内 容 的 渐 隐 效果 。 它 是 一 种 淡 入 淡出 的 效果 滤 镜 ， 能 产生 极 
精细 的 图 片 及 文字 的 转换 效果 。 
BlendTrans 滤 镜 的 语法 格式 如 下 : 


{ filter : BlendTrans ( enabled=bEnabled , duration=fDuration ) } 


其 中 , enabled 表示 是 否 激 活该 滤 镜 ; duration 表示 整个 转换 过 程 所 需要 的 时 间 , 单位 为 秒 。 
要 使 用 BlendTrans 滤 镜 实现 图 片 及 文字 淡 入 淡出 转换 的 效果 , 必须 借助 脚本 语言 JavaScript 
来 调用 它 的 方法 。 首 先 ， 需 要 使 用 两 幅 用 来 转换 的 图 像 ， 如 下 面 的 JavaScript 代码 所 示 : 
imgNum=new ImgArray (2); 
imgNum[0]="images/3.jpg"; 
imgNum[1]="images/2.jpg"; 


然后 需要 编写 JavaScript 的 方法 来 定义 转换 过 程 ， 如 下 面 代码 所 示 : 


Var i=1; 
function playImg (){ 
if (i==1) {i=0;} 
else{i++;} 
imgpic.filters[0] .apply(); 
imgpic.src=imgNum[i]; 
imgpic.filters[0] .play(); 
timeout=setTimeout ('playImg ()', 4000); 
} 


当然 ， 定 义 BlendTrans 滤 镜 的 样式 是 不 可 缺少 的 ， 定 义 类 样式 为 : 
.blendtrans{filter:blendTrans (Duration=3);} 

在 页 面 中 定义 上 面 JavaScript 脚本 中 用 到 的 “imgpic ”元素 ， 并 调用 “blendtrans” 的 类 样 
代码 如 下 : 

<img src="images/3.jpg" class="blendtrans" id="imgpic"/> 


这 样 就 完成 了 图 片 淡 入 淡出 、 仿 Flash 播放 多 张 图 片 的 特效 。 


出 


14.3.2 ”实例 描述 


一 个 网 站 的 首页 就 相当 于 一 个 人 的 “脸面 ”， 是 非常 关键 的 一 个 页 面 ， 而 很 多 设计 者 在 设 


计 首 页 内 容 时 ， 会 在 页 面 中 展示 一 个 类 似 于 Flash 播放 的 效果 ， 但 是 并 非 要 用 到 Flash， 因 为 对 
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于 一 个 优越 的 网 站 ， 浏 览 速度 也 是 很 关键 的 ， 当 一 个 浏览 者 打开 网 站 需要 花费 很 长 时 间 的 时 
候 ， 可 想 而 知 浏览 者 是 不 会 去 看 这 个 网 站 的 。 因 此 ， 很 多 设计 者 都 会 用 CSS 中 的 BlendTrans 
滤 镜 的 特效 。 下 面 我 们 就 米 做 一 下 吧 1 


14.3.3 ”实例 应 用 


【 例 14-2】 制 作 两 张 图 像 轮 换 交 蔡 显 示 效果 

(1) 新 建 HTML 文件 ， 命 名 为 14-3.html。 

(2) 两 张 图 片 的 轮换 交替 显示 功能 采用 BlendTrans 滤 镜 实现 ， 必 须 借助 于 脚本 语言 
JavaScript 来 调用 它 的 方法 。 因 此 这 一 步 需要 在 页 面 中 编辑 JavaScript 代码 ,实现 两 张 图 片 的 轮 
换 交 蔡 显示 特效 ， 代 码 如 下 : 

<script language="JavaScript"> 

// 声 明 数 组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
imgNum=new ImgArray (2) 7 
imgNum[0]="images/3.jpg"7 
imgNum[1]="images/2.jpg"7 
// 获 取 数组 记录 数 
function ImgArray (len){ 
this.length=len; 
} 
Var i=1; 
// 转 换 过 程 
function PlayImg() 
:| 
if (i==1) {i=0;} 
else{i++;} 
imgpic.filters[0] .apply(); 
imgpic.src=imgNum[i]; 
imgpic.filters[0] .play(); 
// 设 置 演示 时 间 ， 这 里 以 毫秒 为 单位 ，4000 则 表示 延迟 4 秒 
// 滤 镜 中 设置 的 转换 时 间 值 ， 这 样 当 转 换 结束 后 还 停留 一 段 时 间 
timeout=setTimeout ('playImg ()',4000); 
1 


</script> 


(3) 在 页 面 中 定义 样式 ， 使 用 BlendTrans 滤 镜 特效 ，CSS 样式 代码 如 下 : 


.blendtrans{ 
filter:blendTrans (Duration=3); 
} 


(4) 在 页 面 的 <body> 标 签 中 定义 页 面 加 载 事件 (onload), 并 指定 页 面 加 载 时 , 要 执行 上 面 定 
义 好 的 JavaScript 代码 中 的 playImg0 函 数 。 代 码 如 下 所 示 : 


<body onload="playImg () "> 


<img src="images/3.jpg" class="blendtrans" id="imgpic"/> 
</body> 


ET | 
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14.3.4 ”运行 结果 


运行 14-3.html 页 面 , 在 浏览 器 中 便 可 以 看 到 BlendTrans 滤 镜 结合 JavaScript 所 实现 的 图 片 
转换 效果 ， 分 别 如 图 14-3 一 图 14-5 所 示 。 
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图 14-3 ”第 一 幅 图 片 14-4 ”转换 过 程 中 
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图 14-5 第 二 幅 图 片 
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@ 
14.3.5 ”实例 分 析 
CO 
在 这 个 实例 中 ， 首 先 在 页 面 元 素 img 中 应 用 BlendTrans 滤 镜 ， 然 后 使 用 JavaScript 脚本 语 


言 来 定义 转换 过 程 。 

在 JavaScript 中 ， 首 先 要 声明 用 来 存储 图 片 的 数组 ， 并 指定 图 片 所 在 的 路 径 。 然 后 再 获取 
数组 的 长 度 ， 用 于 转换 过 程 中 循环 读 取 图 片 数 量 。 接 着 定义 转换 过 程 函 数 一 一 playImg0， 该 过 
程 实现 了 两 幅 图 片 之 间 淡 入 淡出 并 进行 转换 的 过 程 ， apply 方法 用 于 捕获 对 象 内 容 的 初始 显示 ， 
为 转换 做 必要 的 准备 ， 只 有 调用 了 play 方法 才 开 始 转换 。timeout 指定 了 转换 的 延迟 时 间 ， 再 
加 上 滤 镜 中 设置 的 转换 时 间 ， 则 图 片 在 转换 之 间 将 会 停留 一 段 时 间 ， 以 便 清 楚 地 浏览 图 片 。 最 
后 ， 在 主体 元 素 body 中 插入 onload 事件 ， 加 载 转换 过 程 。 


14.4 制作 麦子 随 风 起 舞 特效 


有 时 候 需 要 使 页 面 元 素 产 生 模 糊 效 果 ， 比 如 一 阵风 吹 过 来 ， 需 要 让 麦田 里 的 小 麦 都 跟随 风 
的 方向 产生 运动 模糊 效果 。 其 实 ， 并 非 需要 大 费 周 折 地 去 做 一 张 “动态” 图 片 ， 使 用 CSS 样 
式 中 的 Blur 滤 镜 就 可 以 让 一 张 静 的 图 片 产生 “ 动 ”的 特效 。 


上 视频 教学 :光盘 /视频 /14/14.4 ”制作 才子 随 风 起 舞 特效 avi @k 度 : 4 分 名 
14.4.1 ”基础 知识 一 一 Blur 滤 镜 


Blur 滤 镜 用 于 使 页 面 元 素 产生 模糊 效果 , 如 果 应 用 得 当 , 就 可 以 产生 高 速 移动 的 动感 效果 。 

Blur 滤 镜 的 语法 格式 如 下 : 

{filter : Blur ( enabled=bEnabled，add=iadd，direction=idirectiony 
strength=fstrength )} 


各 参数 如 表 14-3 所 示 。 
表 14-3 ”Blur 滤 镜 参数 


参 数 说 明 


ie | 设置 滤 锌 是 否 激活 
指定 图 片 是 否 改变 成 模糊 效果 。 这 是 个 布尔 参数 ， 有 效 值 为 True 或 False。True 是 默认 
值 ， 表 示 应 用 模糊 效果 ，False 则 表示 不 应 用 


add 


设 定 模糊 方向 。 模 糊 的 效果 是 按 顺 时 针 方向 起 作用 的 ， 取 值 范围 为 0 一 360 度 ，45 度 为 一 
direction 个 间隔 。 有 八 个 方向 值 : 0 表示 零度 ， 代 表 向 上 方向 。45 表示 右上 ，90 表示 向 右 ，135 
表示 右 下 ，180 表示 向 下 ，225 表示 左下 ，270 表示 向 左 ，315 表示 左上 
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续 表 


参 数 说 明 


指定 模糊 半径 大 小 ， 单 位 是 像素 ,默认 值 为 5， 取 值 范围 为 自然 数 ， 该 取 值 决定 了 模糊 效 


strength 


果 的 延伸 范围 


下 面 通过 一 个 实例 说 明 Blur 滤 镜 的 应 用 及 显示 效果 ， 代 码 片段 如 下 : 


<img src="images/20090527134825718589.jpg"/> 

<img src="images/20090527134825718589.jpg" 
style="filter:Blur (add=true,direction=225, strength=20)" /> 
<img src="images/20090527134825718589.jpg" 
style="filter:Blur (add=false,direction=225, strength=20)" /> 


在 浏览 器 中 查看 滤 镜 效果 ， 如 图 14-6 所 示 。 
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图 14-6 Blur 滤 镜 效果 


14.4.2 ”实例 描述 


我 们 来 想象 一 种 场景 ， 一 阵风 吹 过 后 ， 麦 田 里 的 麦子 随 风 起 舞 ， 这 是 一 种 多 么 美丽 的 景象 
啊 。 当 然 在 网 站 开发 的 过 程 中 也 常常 需要 这 样 的 场景 来 修饰 页 面 ， 下 面 就 来 制作 麦子 随 风 起 舞 
的 特效 吧 ! 


14.4.3 ”实例 应 用 


【 例 14-3】 制 作 麦 子 随 风 起 舞 特效 

(1) 新 建 HTML 文件 ， 命 名 为 14-4.html。 

(2) 在 页 面 中 定义 第 一 个 层 ， 在 层 中 插入 一 张 图 片 ， 并 使 用 Blur 滤 镜 特效 ， 使 这 张 图 片 实 
现 “ 风 吹 ” 的 效果 。 代 码 如 下 : 


<div id="apDivl"> 
<img src="images/3dd8b236bfc707eaa2cc2b15.jpg" 
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style="filter:blur (add=true, direction=225, strength=30)"/> 


</div> 


(3) 在 页 面 9 


<style type="text/css"> 
#apDiv2 { 


} 


position:absolute; 
width:253px; 
height:115px; 
z-index:2; 

left: 643px; 

top: Spx; 
font-size:40px; 
color:#006633; 
font-weight:bold; 
font-family: "华文 行 楷 "; 


定义 第 二 个 层 ， 在 这 个 层 中 写 入 “ 风 好 大 啊 ! ”字体 ， 并 设置 该 层 引用 的 样 
式 ， 让 字体 实现 Blur 特效 。 代 码 如 下 : 


filter:blur(add=false,direction=90,strength=10); 


</style> 


<div id="apDiv2"> 风 好 大 啊 ! </div> 


14.4.4 


运行 结果 


在 浏览 器 中 查看 14-4.html 页 面 的 运行 效果 ， 如 图 14-7 所 示 。 


14-7 妻子 风 吹 效 果 
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14.4.5 ”实例 分 析 


应 源码 解析 : 


通过 这 个 实例 ， 了 解 到 Blur 滤 镜 不 仅 可 以 应 用 于 图 片 ， 还 可 以 应 用 于 文字 ， 使 文字 产生 
类 似 于 风 吹 的 效果 ， 如 图 14-7 所 示 。 挺 拔 的 麦子 经 过 “Blur” 滤 镜 应 用 后 ， 显 示 出 风 吹 麦 子 的 
动态 效果 。 


14.5 制作 半 透 明 字 体 


有 时 候 需 要 对 页 面 中 的 文字 进行 修饰 ， 使 其 变 得 美观 大 方 、 同 时 又 极 富有 个 性 ， 这 时 ， 可 
以 选择 将 其 文字 中 指定 的 颜色 设置 为 透明 色 。CSS 中 的 Chroma 滤 镜 就 可 以 实现 这 样 的 效果 。 


入 视频 教学 : 光盘 /视频 /14/14.5 ”制作 半 透 明 字体 .avi @@ 长 度 : 4 分 名 


14.5.1 ”基础 知识 一 一 Chroma 滤 镜 


Chroma 滤 镜 可 以 将 对 象 中 指定 的 颜色 设置 为 透明 色 。 在 页 面 元 素 中 将 该 滤 镜 应 用 于 对 象 
则 对 象 内 容 中 的 指定 颜色 就 变 为 透明 的 ， 即 不 可 见 了 。 其 语法 格式 如 下 : 
{filter : Chroma (enabled=bEnabled , color=sColor)} 


其 中 ，color 参数 设置 要 变 为 透明 色 的 颜色 。 

下 面 通过 一 个 小 实例 来 演示 Chroma 滤 镜 的 应 用 ， 在 页 面 中 编辑 如 下 代码 : 

<style> 

div{position:absolute;top:70;letf:40; filter:Chroma (color=red)} 
p{font-size:30pt; font-weight:bold; color:red} 

</style> 

<p>Chroma 滤 镜 效果 </p> 

<div> 
<p>Chroma 滤 镜 效果 </p> 
</div> 

代码 中 定义 了 元 素 div 的 绝对 位 置 ， 并 设置 该 元 素 的 范围 内 红色 为 透明 色 。 在 段落 元 素 p 
中 的 文字 显示 为 红色 ， 在 应 用 了 滤 镜 后 ， 效 果 如 图 14-8 所 示 。 拖 动 鼠 标 选择 过 滤 颜 色 后 的 文 
字 ， 便 可 以 查看 过 滤 掉 颜色 的 文字 ， 如 图 14-9 所 示 。 

Chroma 滤 镜 一 般 应 用 于 文字 特效 ， 而 且 对 于 有 些 格式 的 图 片 也 是 不 适用 的 。 例 如 ，JPEG 
格式 的 图 片 是 一 种 已 经 减 色 和 压缩 处 理 的 图 片 , 所 以 要 设置 其 中 某 种 颜色 透明 十 分 困难 。 此 外 ， 
每 幅 图 片 只 能 指定 一 种 透明 色 。 对 于 已 设置 另外 的 色 为 透明 色 的 GIF 等 格式 的 图 片 ， 再 设置 透 
明 色 时 ， 原 先 透明 而 不 可 见 的 颜色 就 会 重新 显示 出 来 。 
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Chroma 滤 镜 效 果 


Chroma 滤 镜 效 果 


图 14-8 Chroma 滤 镜 效果 图 14-9 显示 过 滤 颜 色 的 文字 


14.5.2 ”实例 描述 


我 是 一 个 很 喜欢 宠物 的 人 ， 所 以 就 希望 每 张 宠物 图 片 都 做 到 “完美 无 刺 ”。 今 天 ， 心 血 来 
潮 ， 就 做 了 一 个 “漂亮 宝贝 ”的 宠物 秀 。 下 面 就 来 给 大 家 分 享 一 下 吧 ! 


14.5.3 ”实例 应 用 


【 例 14-4】 制 作 宠物 秀 页 面 
(1) 新 建 HTML 文件， 命名 为 14-5.html。 
(2) 编辑 14-5.html 页 面 ， 在 页 面 中 定义 一 个 层 展示 宠物 ， 并 在 层 上 面 写 “漂亮 宝贝 
个 字 ， 字 体 要 求 是 透明 色 的 ， 黑 边框 。 完 整 代码 如 下 : 

<body> 

<div style=" width:850px; height:680px;position:absolute;top:70;letf:40; 
filter:Chroma(color=black); 
background-image:url (images/20061102171207491859.jpg); 
background-repeat:no-repeat;"> 

<p style="font-size:28pt; font-weight:bold; color:black; 

position:relative; left:100px; top:100px; "> 漂亮 宝贝 </p> 

</div> 
</body> 


(3) 保存 14-5.html 页 面 。 


14.5.4 ”运行 结果 


在 浏览 器 中 查看 “宠物 秀 ” 页 面 ， 效 果 如 图 14-10 所 示 。 


< 人 mm 


14-10 ”宠物 秀 


14.5.5 “实例 分 析 


ni 


在 该 实例 中 ， 定 义 了 了 标签 中 的 “漂亮 宝贝 ”字体 为 黑色 、 加 粗 、28 像素 ， 而 在 谋 套 在 它 
外 面 的 div 标签 中 定义 了 Chroma 滤 镜 ， 并 设置 了 要 变 为 透明 色 的 颜色 是 黑色 ， 因 此 会 出 现 黑 
边框 、 透 明 色 的 字体 ， 如 图 14-10 所 示 的 那样 。 


14.6 制作 投影 “宠物 秀 ” 页 面 


很 多 时 候 需 要 使 页 面 元 素 内 容 在 页 面 上 产生 投影 , 从 而 实现 立体 的 效果 。CSS 中 的 Shadow 
滤 镜 和 DropShadow 滤 镜 就 可 以 帮 你 实现 。 


于 视频 教学 ; 光盘 /视频 /14/14.6 ”制作 投影 “宠物 秀 ” 页 面 .avi 图 长 度 : 6 分 名 


14.6.1 基础 知识 一 一 Shadow 滤 镜 与 DropShadow 滤 镜 


Shadow 滤 镜 和 DropShadow 滤 镜 都 可 以 为 页 面 对 象 设置 投影 。 唯一 不 同 的 就 是 Shadow 滤 
镜 能 够 在 指定 的 方向 设置 投影 ， 且 投影 可 产生 渐进 的 效果 ， 而 DropShadow 滤 镜 是 利用 偏 移 量 
来 定义 投影 位 置 。 下 面 就 来 详细 地 介绍 一 下 这 两 个 滤 镜 。 

1. Shadow 滤 镜 

Shadow 滤 镜 可 以 在 指定 的 方向 建立 对 象 的 投影 ， 且 投影 可 产生 渐进 的 效果 ， 再 结合 实体 
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更 有 立体 的 感觉 。 它 的 语法 格式 如 下 : 
{filter:Shadow (enabled=bEnabled, color=sColor, direction=iOffset, strength=iDistance)} 
各 参数 如 表 14-4 所 示 。 
表 14-4 Shadow 滤 镜 参数 


参 数 说 明 


enabled 设置 滤 镜 是 否 激活 
Color 设置 投影 的 颜色 

设置 投影 的 方向 ， 分 别 有 8 种 取 值 代表 8 种 方向 : 取 值 为 0 表示 向 上 方向 ，45 为 右上 方 ， 
90 为 右 方 ，135 为 右 下 方 ，180 为 下 方 ，225 为 左下 方 ，270 为 左 方 ，315 为 左上 方 


direction 


设置 投影 向 外 扩散 的 距离 


2. DropShadow 滤 镜 

DropShadow 滤 镜 用 于 建立 阴影 效果 。 该 滤 镜 使 元 素 内 容 在 页 面 上 产生 投影 ， 从 而 实现 立 
体 的 效果 。 其 工作 原理 就 是 创建 一 个 偏 移 量 ， 并 定义 一 个 阴影 颜色 ， 使 之 产生 效果 。 

DropShadow 滤 镜 的 语法 格式 如 下 : 


{filter : DropShadow ( enabled=bEnabled , color=sColor ，offx=IiOffsetxv 
offy=iOffsety, positive=bPositive )} 


语法 中 各 参数 如 表 14-5 所 示 。 
表 14-5 DropShadow 滤 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
i 指定 滤 镜 产生 的 阴影 颜色 
offx 指定 阴影 水 平方 向 偏 移 量 ， 默 认 值 为 5px 
ofty 指定 阴影 垂直 方向 偏 移 量 ， 默 认 值 为 5px 

本 指定 阴影 透明 程度 ,为 布尔 值 。True(1) 表 示 为 任何 的 非 透明 像素 建立 可 见 的 阴影 : False(0) 
人 表示 为 透明 的 像素 部 分 建立 透明 效果 


14.6.2 ”实例 描述 


制作 宠物 秀 页 面 时 ， 可 以 在 一 张 很 漂亮 的 宠物 图 片上 面 编辑 透明 字体 来 优化 宠物 图 片 ， 还 
可 以 使 用 投影 效果 更 进一步 地 优化 宠物 秀 图 片 ， 不 仅 可 以 使 宠物 图 片 实现 投影 效果 ， 还 可 以 在 
宠物 图 片上 面 编辑 字体 ， 并 实现 投影 效果 。 下 面 就 来 做 一 做 吧 ! 
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14.6.3 ”实例 应 用 


【 例 14-S】 制 作 投影 “宠物 秀 ” 页 面 

(1) 新 建 HIML 文件 ， 命 名 为 14-6.html。 

(2) 编辑 14-6.html 页 面 ,在 页 面 中 定义 一 行 两 列 的 表格 ,在 两 个 单元 格 中 分 别 插入 一 张 宠 
物 图 片 和 一 个 层 ， 其 中 一 个 单元 格 的 层 中 写 着 “可 爱 宝贝 ”的 字样 ， 另 一 个 单元 格 的 层 中 写 着 
“漂亮 宝贝 ”的 字样 。 表 格 代码 如 下 : 


<table cellpadding="5" cellspacing="0" border="0" align="center"> 
<tr> 

<td class="shadow"> 
<img src="images/20061102171207491859 1.jpg"/> 
<div id="Divl"> 可 爱 宝贝 </div> 

</td> 

<td class="dropshadow"> 
<img src="images/79e0fbcbdadbf85c7f3e6fb2.jpg" /> 
<div id="Div2"> 漂 亮 宝贝 </div> 


</td> 
</tr> 
</table> 
(3) 在 上 面 的 表格 中 总 共有 四 项 内 容 ， 两 张 宠物 图 片 和 两 个 层 ， 下 面 编辑 这 四 项 内 容 的 样 


式 ， 使 它们 实现 Shadow 滤 镜 特效 。CSS 样式 如 下 : 


tdi{ 
text-align:center; 
} 
.shadow { 
padding-bottom:10px; 
font-weight:bold; 
font-size:24px; 
filter: shadow(color = gray, direction =135,strength=20); 
} 
.dropshadow { 
font-weight:bold; 
font-size:24px; 
filter: dropshadow (color = gray, offx = 15, offy = 15, positive = 1); 


14.6.4 ”运行 结果 


在 浏览 器 中 运行 14-6.html 页 面 ， 出 现 如 图 14-11 所 示 的 页 面 。 


图 
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图 14-11 Shadow 滤 镜 和 DropShadow 滤 镜 的 效果 


14.6.5 “实例 分 析 


Bre 


在 这 个 实例 中 ， 定义 了 “shadow” 和 “dropshadow” 两 个 类 选择 符 ， 在 页 面 中 定义 了 一 个 
一 行 两 列 的 表格 ， 表 格 的 两 个 单元 格 分 别 应 用 了 “shadow” 选 择 符 和 “dropshadow” 选 择 符 ， 
因此 表格 中 的 图 像 有 了 投影 的 效果 。 接 着 又 在 两 个 单元 格 中 分 别 定义 了 层 布 局 ， 并 定义 了 
“Shadow” 投 影 效 果 和 “DropShadow” 投 影 效果 ， 故 层 中 的 文字 实现 了 投影 的 效果 。 


14.7 ”可 翻转 的 图 像 和 文字 


当 需 要 把 一 张 图 片 水 平 翻 转 180”， 也 就 是 希望 看 到 的 是 这 张 图 片 的 “背面 ”时 ， 是 否 需 
要 大 动 干戈 地 去 做 该 张 图 片 的 “背面 图 像 ” 呢 ? 当 需 要 把 一 张 图 片 垂直 翻转 180”， 也 就 是 希 
望 浏览 者 “站 在 电脑 顶部 往 下 看 ”， 那 是 否 也 需要 大 费 周折 地 去 做 一 张 图 片 呢 ? 不 需要 ，CSS 
为 大 家 提供 了 FlipH 滤 镜 和 FlipV 滤 镜 ， 这 两 个 滤 镜 就 可 以 完成 这 样 的 工作 。 

好 奇 者 或 许 也 很 想 知道 “祖国 ”的 倒 体 字 是 怎样 的 吧 ? 这 些 效果 使 用 CSS 中 的 FlipH 滤 镜 
和 FlipV 滤 镜 都 可 以 完成 。 


< 视频 教学 : 光盘 /视频 /14/14.7 可 翻转 的 图 像 和 文字 .avi 长 度 : 5 分 名 


14.7.1 ”基础 知识 一 一 FlipH 滤 镜 与 FlipV 滤 镜 


需要 使 页 面 元 素 水 平 翻转 或 者 垂直 翻转 ， 不 需要 做 一 张 翻 转 后 的 图 片 放 在 页 面 中 ; 如 果 想 
知道 某 些 文字 的 倒 体 字 也 不 难 , CSS 中 的 FlipH 滤 镜 和 FlipV 滤 镜 都 可 以 完成 这 些 复 杂 的 工作 。 


< 全 
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下 面 就 具体 地 讲述 这 两 个 滤 镜 的 用 法 。 

1. FlipH 滤 镜 

FlipH 滤 镜 用 于 水 平 翻转 对 象 , 即将 元 素 对 象 按 水 平方 向 进行 180 度 翻转 。FlipH 滤 镜 可 以 
在 CSS 中 直接 使 用 ， 使 用 格式 如 下 : 

{Fliter: FlipH (enabled=bEnabled)} 

该 滤 镜 中 只 有 一 个 enabled 参数 ， 表 示 是 否 激 活该 滤 镜 。 

FlipH 滤 镜 的 使 用 非常 简单 ， 只 需要 在 页 面 元 素 中 添加 filterFlipHO 即 可 ， 比 如 需要 使 
1402.jpg 的 图 片 水 平 翻 转 ， 代 码 如 下 : 

<img src="1402.jpg" style="filter:FlipH()" /> 

在 浏览 器 中 查看 效果 ， 如 图 14-12 所 示 。 

FlipH 滤 镜 除 了 能 够 实现 图 片 的 翻转 外 ， 还 能 够 实现 文字 的 翻转 ， 例 如 ， 下 面 代码 实现 了 
文字 翻转 的 效果 。 运 行 结果 如 图 14-13 所 示 。 


<p style="filter:FlipH() "> 祖国 </p> 
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图 14-12 ”FlipH 滤 镜 效果 (图 像 水 平 翻转 ) 图 14-13 文字 水 平 翻转 


2. FlipV 滤 镜 

FlipH 滤 镜 用 来 实现 对 象 的 水 平 翻转 ， 而 FlipV 滤 镜 用 来 实现 对 象 的 垂直 翻转 ， 其 中 包括 
文字 和 图 像 。 语 法 格式 如 下 : 

{Fliter: FlipV (enabled=bEnabled)} 

该 滤 镜 只 包含 有 一 个 表示 是 否 激活 滤 镜 的 参数 ， 能 够 在 代码 中 直接 使 用 。 例 如 使 1402.jpg 
图 像 垂 直 翻转 ， 可 以 使 用 下 面 的 代码 : 

<img src="1402.jpg" style="filter:FlipV()" /> 

在 浏览 器 中 查看 效果 ， 如 图 14-14 所 示 。 

若 要 实现 文字 的 垂直 翻转 ， 则 可 以 使 用 下 列 代码 : 

<p style="filter:FlipV()"” > 祖国 </p> 


在 浏览 器 中 查看 滤 镜 效果 ， 如 图 14-15 所 示 。 
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图 14-14 ”FlipV 滤 镜 效果 (图 片 垂直 翻转 ) 图 14-15 文字 垂直 翻转 


14.7.2 ”实例 描述 


可 以 想象 一 下 ， 如 果 有 两 个 人 相对 弹琴 ， 那 将 是 多 么 美妙 的 景象 啊 ! 而 现在 只 有 一 张 面 朝 
左边 的 弹琴 图 片 ， 那 么 下 面 我 们 就 来 做 一 张 面 朝 右 边 的 图 片 吧 ! 


14.7.3 ”实例 应 用 


【 例 14-6】 两 人 相对 弹琴 

(1) 新 建 HTML 文件 ， 命 名 为 14-7.html。 

(2) 编辑 14-7.html 页 面 ， 在 页 面 中 添加 一 个 id 为 “Div2” 的 层 ， 在 该 层 中 使 用 <img> 标 签 
引入 一 张 正在 弹琴 的 古人 图 片 ， 代 码 如 下 : 


<div id="Div2"> 
<img src="images/017046ef2f0cb3e4b3fb950d.png" width="500" height="388" /> 
</div> 


(3) 定义 “Div2” 层 的 样式 ，CSS 代码 如 下 : 


#Div2 { 
position:absolute; 
width:500px; 
height:388px; 
z-index:2; 
left: 525px; 
top: 229px; 

} 


(4) 在 14-7.html 页 面 中 再 添加 一 个 id 为 “Div3” 的 层 ， 在 该 层 中 也 引入 一 张 “Div2” 层 中 
引入 的 图 片 ， 并 在 <img> 标 签 中 定义 “style” 样 式 ， 使 该 图 像 实现 FlipH 滤 镜 特效 ， 代 码 如 下 : 

<div id="Div3"> 
<img src="images/017046ef2f0cb3e4b3fb950d.png" width="500" height="388" 


style="filter:FlipH()"/> 
</div> 
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(5) 定义 “Div3” 层 的 样式 ，CSS 代码 如 下 : 
#Div3 { 
position:absolute; 
width:500px; 
height:388px; 
z-index:1; 
left: Opx; 
DB Z29DXZ 
} 
(6) 设置 页 面 背景 色 为 黑色 ， 即 在 <body> 标 签 中 添加 样式 ， 代 码 如 下 所 示 : 


<body style="background-color:black;"> 
</body> 
:二 /二 
14.7.4 ”运行 结果 


在 浏览 器 中 查看 14-7.html 页 面 效 果 ， 如 图 14-16 所 示 。 
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14-16 ”两 人 相对 弹琴 (图 像 水 平 翻转 ) 


14.7.5 ”实例 分 析 


® 
人 源码 解析 : 
在 这 个 实例 中 , 定义 了 两 个 层 来 放置 “017046ef2f0cb3e4b3fb950d.png” 图 片 , 一 张 是 原 图 ， 
也 就 是 “Div2” 层 中 的 图 像 ( 图 14-16 中 右边 的 图 像 ); 另 一 张 是 经 过 翻转 之 后 的 图 像 ， 即 “Div3” 
层 中 的 图 像 (图 14-16 中 左边 的 图 像 )， 从 而 形成 了 两 个 古代 美女 弹琴 的 景象 。 
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14.8 ”制作 光 晨 字 


大 家 都 喜欢 很 柔和 的 感觉 ,给 人 一 种 舒适 、 安 详 的 美感 。CSS 在 这 点 上 一 点 也 不 逊色 ， 它 
提供 了 Glow 滤 镜 ， 可 以 使 对 象 的 边缘 产生 一 种 柔和 的 边框 或 光 晕 。 


和 视频 教学 : 光盘 /视频 /14/14.8 ”制作 光 晕 字 .avi 加 长 度 : 5 分 钟 
14.8.1 ”基础 知识 一 一 Glow 滤 镜 


Glow 滤 镜 可 以 使 对 象 的 边缘 产生 一 种 柔和 的 边框 或 光 晕 ， 并 可 以 产生 如 火焰 一 样 的 效果 。 
这 种 效果 的 颜色 和 强度 可 通过 数值 进行 定义 ， 其 语法 格式 如 下 : 


{filter : Glow ( enabled=bEnabled , color=sColor , strength=iDistance ) } 


其 中 ，color 设置 边缘 光量 的 颜色 ，strength 设置 举 圈 的 范围 ， 值 的 范围 是 1 一 255， 值 越 大 
效果 越 强 。 

当 Glow 滤 镜 作用 于 文字 时 ,每 个 文字 的 边缘 都 会 出 现 光 晕 ， 效 果 非 常 强烈 。 而 对 于 图 片 ， 
Glow 滤 镜 只 在 其 边缘 上 加 上 光 曙 效果 。 下 面 就 以 一 个 实例 来 演示 Glow 滤 镜 的 特效 。 


<style> 
(IE 
.leaf{ 
width:100%; 


padding-top:10px; 
padding-bottom:10px; 
padding-left: 20px; 
filter:Glow (color=#FF3399, strength=15)} 
-wenyt{ 
width:100%; 
padding-top:10px; 
padding-left:20px; 
filter:Glow (color=#9966CC, strength=10)} 
--> 
</style> 
<body style="background-image:url (images/200812140184793771.jpg); 
background-repeat:no-repeat;"> 
<div class="leaf"> 
<img src="images/header bg2.jpg" /> 
</div> 
<div class="weny"> 
<p style="font-family: lucida handwriting; font-size: 32pt; font-weight: 
bold; color: #003366"> 
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Welcome To My Hometown! </p> 
</div> 
</body> 


代码 中 ， 第 一 个 div 标记 使 用 类 选择 符 leaf， 为 图 片 添加 光 晕 。 第 二 个 div 标记 使 用 类 选 
择 符 weny， 为 文字 添加 光 晕 。 并 且 为 了 使 光 晕 显 示 完 全 ， 都 定义 了 间隙 及 宽度 。 在 浏览 器 中 
查看 滤 镜 效果 ， 如 图 14-17 所 示 。 
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14-17 ”Glow 滤 镜 效果 


14.8.2 ”实例 描述 


人 世间 最 伟大 的 爱 莫 过 于 父母 之 爱 ， 在 感恩 节 来 临 之 际 ， 我 们 来 做 一 个 “感恩 父母 ”的 宣 
传 页 吧 。 为 了 使 宣传 页 显得 更 加 漂亮 ， 这 里 使 用 Glow 滤 镜 特效 给 标题 边缘 添加 光 坚 的 特效 。 
下 面 就 来 看 看 具体 的 实现 步骤 吧 。 


14.8.3 ”实例 应 用 


【 例 14-7】 制 作 “ 感 恩 父 母 ” 宣 传 页 
(1) 新 建 HTML 文件 ， 命 名 为 14-8.html。 
(2) 在 页 面 中 定义 “感恩 父母 ”宣传 页 的 标题 文字 ， 代 码 如 下 : 


<p class="china" align="center" style="font-family: 华文 行 楷 ; font-size:50pt; 
font-weight: bold; color: black;"><br> 
感恩 父母 ! ! </p> 


(3) 在 页 面 中 定义 宣传 页 主题 图 片 ， 即 在 层 中 引入 一 张 图 片 ， 代 码 如 下 : 
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<hr style="border:#000000 solid double"/> 


<div class="chinaPic"> 


<img src="images/46d7709356e3622ce333af4e359a9b47.jpg" width="200" 
height="150"/> 


</div><br /> 


(4) 在 页 面 中 定义 宣传 页 内 容 ， 代 码 如 下 : 
<div id="Divl" align="left"> 

pe <br /> 

感恩 的 心 <br /> 

感谢 有 你 <br /> 


我 来 自 偶然 <br /> 
像 一 颗 尘 土 <br /> 
有 谁 看 出 我 的 脆弱 <br /> 
我 来 自 何方 <br /> 
我 情 归 何 处 <br /> 
谁 在 下 一 刻 呼 唤 我 <br /> 


(5) 上 面 定义 的 这 些 内 容 在 页 面 中 都 是 居中 显示 的 , 即 在 这 些 内 容 前 面 和 后 面 添加 <center> 
标签 和 </center> 标 签 。 
(6) 让 宣传 页 的 主题 和 主题 图 片 实现 Glow 滤 镜 特效 ， 代 码 如 下 : 
.Chinai{ 
filter:Glow (color = #FF3399, strength = 15); 
width: 100%; 
height: 16lpx; 
top: 23px; 
1 
.chinaPict{ 
width:100%; 
padding-top:10px; 
padding-bottom:10px; 
padding-left: 1l0px; 
filter:Glow (color=yellow, strength=15) 


14.8.4 ”运行 结果 


在 浏览 器 中 运行 14-8.html 页 面 ，“ 感 恩 父母 ”的 宣传 页 就 呈现 出 来 了 ， 如 图 14-18 所 示 。 
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图 14-18 “感恩 父母 ”宣传 页 


14.8.5 ”实例 分 析 


i 

在 这 个 实例 中 , 指定 “感恩 父母 ”四 个 字 使 用 Glow 滤 镜 特效 : 边缘 光泽 的 颜色 为 “#FF3399”， 
学 圈 的 范围 为 15; 并 指定 感恩 父母 的 标识 图 片 也 使 用 Glow 滤 镜 特效 。 这 里 需要 说 明 一 点 ， 如 
果 需 要 使 图 片 应 用 光 尝 特效 ， 在 <img> 标 签 中 添加 样式 是 不 可 以 的 ， 只 能 在 <img> 标 签 所 在 的 
容器 <div> 中 添加 样式 ， 如 上 面 实例 中 的 国旗 图 片 容 器 调用 “chinaPic” 选 择 符 ， 而 不 是 在 标签 
<img> 中 调用 。 


14.9 让 古代 美女 的 粉色 衣裳 变 为 灰色 


就 像 是 一 张 色 彩 鲜明 的 战争 图 像 转变 为 灰 度 图 像 才能 达到 复古 的 感觉 一 样 , 灰 度 图 像 特效 
在 Web 开发 中 也 是 必 不 可 少 的 ， 而 CSS 中 的 Gray 滤 镜 就 可 以 让 图 像 中 的 色彩 全 部 由 黑 、 白 、 
灰 三 种 颜色 代替 。 下 面 我 们 就 来 详细 地 介绍 Gray 滤 镜 的 应 用 。 


已 入 视频 教学 : 光盘 /视频 /14/14.9 让 十 代 美 女 的 粉色 家 演变 为 灰色 avi 。 @ 长 度 : 8 分 名 


14.9.1 基础 知识 一 一 Gray 滤 镜 


Gray 滤 镜 一 般 应 用 于 图 像 , 用 来 将 一 幅 图 像 转变 为 灰 度 图 , 即 图 像 中 的 色彩 全 部 由 黑 、 白 、 
灰 三 种 颜色 代替 。 


sm >> 
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Gray 滤 镜 的 语法 格式 比较 简单 ， 只 有 一 个 表示 是 否 激活 的 参数 enabled。 可 以 在 页 面 代码 


直接 使 用 ， 格 式 如 下 : 


{filter:Gray (enabled=bEnabled)} 


Gray 滤 镜 的 应 用 只 需要 给 图 像 添加 样式 “filter:Gray0” 就 可 以 了 ， 如 下 面 的 代码 : 


<img src="images/1120080093.jpg" width="240" height="210" 
style="filter:Gray ()"/> 


在 浏览 器 中 查看 滤 镜 效果 ， 如 图 14-19 所 示 。 


14.9.2 ”实例 描述 


如 今 回想 古代 的 事物 ， 都 是 灰色 的 ， 因 为 没有 经 历 过 那 种 年 代 ， 不 可 能 真实 地 回想 起 一 些 
什么 。 那 么 ， 现 在 假设 一 位 古代 美女 穿着 粉色 的 衣服 ， 含 情 脉 脉 地 看 着 远 处 的 风景 ， 这 时 可 以 
把 脑海 中 想象 到 的 事物 编辑 成 灰色 图 像 展 现在 页 面 中 ， 这 样 会 达到 更 理想 的 效果 。 


14.9.3 ”实例 应 用 


【 例 14-8】 让 古代 美女 的 粉色 衣裳 变 为 灰色 
(1) 新 建 HTML 文件 ， 命 名 为 14-9.html。 
(2) 编辑 14-9.html 页 面 ， 页 面 内 容 很 简单 ， 只 是 一 张 简单 的 图 片 ， 并 应 用 Gray 过 滤 特 效 ， 


关键 代码 如 下 : 


<body> 


图 14-19 ”Gray 滤 镜 效果 


<img src="images/714ebe1561783c35c83d6d29.jpg"” style="filter:Gray()" /> 


</body> 


(3) 保存 页 


硬 ， 查 看 效果 。 


Eee | 
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14.9.4 “运行 结果 


在 浏览 器 中 运行 14-9.html 页 面 ， 如 图 14-20 所 示 。 


图 14-20 古代 美女 粉色 衣裳 变 为 灰色 效果 图 


14.9.5 ”实例 分 析 


应 源码 解析 : 


在 该 实例 中 ， 只 是 在 <img> 标 签 中 添加 “style="filter:Gray0"” 代 码 ， 从 而 使 古代 美女 图 像 
应 用 Gray 滤 镜 特效 。 原 图 的 美女 衣裳 是 粉色 的 ， 但 其 应 用 Gray 滤 镜 之 后 变 为 灰色 ， 由 此 可 
见 ，Gray 滤 镜 的 使 用 方法 非常 简单 ， 不 仅 可 以 在 <img> 标 签 中 这 样 使 用 , 还 可 以 采用 在 div、 td 
等 容器 中 添加 “style="filter:Gray0"” 代 码 的 方式 使 用 ， 而 无 须 在 <img> 标 签 中 添加 Gray 滤 镜 
特效 。 


14.10 ”图像 大 翻身 


有 时 候 需 要 把 图 像 或 者 文字 的 可 视 化 属性 翻转 一 下 ， 从 而 达到 自己 想 要 的 结果 ; 而 有 时 候 
需要 让 页 面 中 的 元 素 轮廓 加 亮 显示 , 产生 类 似 于 久光 片 的 效果 。 这 些 效 果 使 用 CSS 中 的 Invert 
滤 镜 和 Xray 滤 镜 就 可 以 实现 。 下 面 就 介绍 CSS 中 的 Invert 滤 镜 和 Xray 滤 镜 的 应 用 技术 。 


得 
:视频 教学 : 光盘 /视频 /14/ 14.10 “图像 大 翻身 .avi @O 度 : 5 分 钟 
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14.10.1 基础 知识 一 一 Invert 滤 镜 与 Xray 滤 镜 


如 果 需 要 制作 一 张 类 似 于 底片 效果 的 图 像 , 使 用 CSS 中 的 Invert 滤 镜 就 可 以 做 到 ， 该 滤 镜 
可 以 把 对 象 的 可 视 化 属性 全 部 翻转 。 与 此 相似 的 还 有 一 个 Xray 滤 镜 (X 射线 ), 该 滤 镜 只 是 让 对 
象 反映 出 它 的 轮廓 ， 并 将 这 些 轮廓 加 亮 ， 类 似 于 验光 片 效果 。 下 面 就 来 详细 介绍 如 何 使 用 这 两 
个 滤 镜 。 

1. Invert 滤 镜 

Invert 滤 镜 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ， 包 括 色彩 、 饱 和 度 和 亮度 值 。 该 滤 镜 一 般 
用 于 处 理 图 像 ， 使 图 像 显示 类 似 于 底片 的 效果 。 

Invert 滤 镜 的 语法 格式 中 只 包含 一 个 enabled 参数 ， 用 来 设置 是 否 激活 滤 镜 ， 格 式 如 下 : 

{filter:Invert (enabled=bEnabled)} 

在 需要 使 用 Invert 滤 镜 特效 的 页 面 对 象 中 添加 样式 “filter:Invert0”, 该 对 象 就 实现 了 Invert 
滤 镜 特效 ， 如 下 面 的 代码 所 示 : 

<img src="images/5243525 24.jpg" style="filter:Invert()" /> 

在 浏览 器 中 查看 滤 镜 效果 ， 如 图 14-21 所 示 。 

2. Xray 滤 镜 

Xray 的 中 文 含义 为 X 射线 ，Xray 滤 镜 就 是 让 对 象 反 映 出 它 的 轮廓 并 将 这 些 轮廓 加 亮 ， 产 


生 的 效果 类 似 于 义 光 片 。 
Xray 滤 镜 只 有 一 个 enabled 参数 ， 用 于 确定 是 否 激 活该 滤 镜 ， 格 式 如 下 : 


{filter:Xray (enabled=bEnabled)} 


Xray 滤 镜 一 般 应 用 在 图 像 特 效 上 ， 实 例 代 码 如 下 所 示 : 
<img src="images/5243525 24.jpg" style="filter:Xray()" /> 


在 浏览 器 中 查看 滤 镜 效果 ， 如 图 14-22 所 示 。 


14-21 ”Invert 滤 镜 效果 14-22 Xray 滤 镜 效果 


< 


6ss ww 开发 学 习 实录 


14.10.2 ”实例 描述 


当 翻 看 使 用 胶卷 式 的 相机 拍 的 照片 时 , 我 们 只 能 看 到 一 个 人 的 轮廓 。 这 种 效果 与 使 用 Xray 
滤 镜 特效 的 效果 有 点 相似 ， 下 面 我 们 就 使 用 Xray 滤 镜 特效 来 模拟 制作 相册 底片 效果 吧 ! 


14.10.3 ”实例 应 用 


【 例 14-9】 制 作 相 册 底 片 效果 

(1) 新 建 HIML 文件 ， 命 名 为 14-10.html。 

(2) 在 页 面 中 定义 一 个 三 行 一 列 的 表格 ， 第 一 行为 一 张 类 似 于 胶卷 底片 边框 的 图 片 ， 第 二 
行为 4 张 图 片 ， 并 向 这 4 张 图 片 中 添加 Invert 滤 镜 特效 ， 实 现 底 片 效 果 ; 第 三 行 和 第 一 行 的 内 
容 相同 ， 都 是 向 用 户 展示 胶卷 底片 边框 的 内 容 。 完 整 的 表格 代码 如 下 : 


<table cellpadding="0" cellspacing="0" border="0"> 
<tr style="background-image:url (images/jiaol.jpg); 
background-repeat:repeat-x"> 
<td style="height:77px;">&nbsp;</td> 
</tr> 
<tr> 
<td style="height:250px"> 
<img src="images/dcca492a39a3aa7c5243clbb.jpg" 
style="filter:Invert()" width="200px" height="250px"/> 
<img src="images/124X0J32B03a2L.jpg" style="filter:Invert()" 
width="200px" height="250px" /> 
<img src="images/2400124.jpg" style="filter:Invert()" 
width="200px" height="250px" /> 
<img src="images/20064131117330.jpg" style="filter:Invert()" 
width="200px" height="250px" /> 
</td> 
</tr> 
<tr style="background-image:url (images/jiao.jpg); 
background-repeat:repeat-x"> 
<td style="height:96px;" valign="top">gnbsp;</td> 
</tr> 
</table> 


(3) 保存 页 面 。 


14.10.4 ”运行 结果 


在 浏览 器 中 查看 相册 底片 的 效果 ， 如 图 14-23 所 示 。 
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图 14-23 ”相册 底片 效果 


14.10.5 ”实例 分 析 


ye 


在 该 实例 中 的 四 张 人 物 图 片 都 使 用 了 Invert 滤 镜 特效 ，Invert 滤 镜 能 使 图 像 达到 底片 的 效 

果 。 其 实 ，Invert 滤 镜 和 Xray 滤 镜 的 使 用 不 仅 可 以 在 图 像 标签 <img> 中 添加 

“filter:Invert()/filter:Xray()” 代 码 ， 还 可 以 在 页 面 元 素 所 在 的 容器 ， 比 如 div 容器 、td 容器 中 添 
加 “filter:Invert(/filter:Xray()” 代 码 。 


14.11 ”实现 镭射 灯 的 效果 


在 昏暗 的 灯光 下 ， 一 缕 灯 光照 进来 ， 那 是 一 种 什么 样 的 场景 呢 ? 而 有 时 候 ， 客 户 的 要 求 就 
是 这 样 “ 无 所 不 有 ”， 不 用 担心 ， 使 用 CSS 中 的 Light 滤 镜 配合 JavaScript 脚本 就 可 以 实现 这 
样 的 效果 。 


A 
,视频 教学 : 光盘 /视频 /14/14.11 实现 镭射 灯 的 效果 .avi 长 度 : 4 分 钟 


14.11.1 基础 知识 一 一 Light 滤 镜 


Light 滤 镜 可 以 产生 类 似 于 光照 的 效果 ， 它 可 以 控制 多 个 光源 照 向 一 个 元 素 对 象 ， 并 可 以 
调节 亮度 以 及 颜色 。 
Light 滤 镜 的 语法 格式 如 下 : 


{filter:Light (enabled=bEnabled)} 
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Light 滤 镜 是 所 有 滤 镜 中 最 复杂 的 一 个 ,而 且 还 需要 脚本 语言 JavaScript 配合 使 用 。 对 于 已 
定义 的 Light 滤 镜 属性 , 可 以 调用 它 的 方法 (Method) 来 设置 或 改变 属性 。 这 些 方法 如 表 14-6 所 示 。 


表 14-6 Light 滤 镜 使 用 的 方法 


方 法 说 明 
AddAmbient 加 入 包围 的 光源 Changstrength 改变 光源 的 强度 
AddCone 加 入 锥 形 光源 Clear 清除 所 有 的 光源 


Addpoint 加 入 点 光源 移动 光源 
Changcolor 改变 光 的 颜色 Changstrength 改变 光源 的 强度 
14.11.2 ”实例 描述 


假设 现在 需要 描绘 出 镭射 灯 照 在 一 束 鲜 花 上 的 全 过 程 ， 那 么 可 以 使 用 Light 滤 镜 与 
JavaScript 相 结 合 ， 改 变 光源 的 位 置 。 


14.11.3 ”实例 应 用 


【 例 14-10】 实 现 镭 射 灯 的 效果 

(1) 新 建 HTML 文件 ， 命 名 为 14-11.html。 

(2) 在 页 面 中 创建 一 个 两 行 一 列 的 表格 ， 第 一 行 显示 “镭射 灯 效 果 ”5 个 字 ， 第 二 行 引入 
- 张 图 片 ， 并 设置 该 图 片 的 CSS 样式， 实现 Light 滤 镜 特效 。 表 格 的 完整 代码 如 下 所 示 : 


<table> 
<tr> 
<td style="color:DarkBlue; font-weight:bold"> 
动态 光源 效果 
</td> 
过 /EX 
攻关 
<td id="light" style="filter: light(); width: 200px"> 
<img src="images/6bdbfdl7cala762dc93d6dc2.jpg"> 
</td> 
</Er> 
</table> 


(3) Light 滤 镜 必须 与 JavaScript 配合 使 用 。 编辑 JavaScript 代码 ， 实 现 光照 的 效果 ,而 且 随 
着 鼠标 的 移动 ， 灯 光照 射 的 方向 也 不 相同 ， 类 似 于 镭射 灯 的 效果 。JavaScript 代码 如 下 所 示 : 


<script language="Javascript"> 
FS 二 
var g numlights=0; 
// 调用 设置 光源 函数 
window.onload=setlights; 


// 获得 鼠标 句柄 


mS > 
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light.onmousemove=mousehandler; 
// 建 立 光源 的 集合 
function setlights(){ 
light.filters[0] .clear(); 
light.filters[0] .addcone (0,0,5,100,100,255,255,0,60,30); 
} 
// 捕捉 鼠标 的 位 置 来 移动 光线 焦点 
function mousehandler (){ 
x=(window.event .x-80); 
y=(window.event.y-80); 
light.filters[0] .movelight (0,x,y,5,1); 
} 
--> 


</script> 


要 实现 光照 的 效果 ，JavaScript 脚本 语言 起 了 主要 的 作用 。 其 中 调用 了 滤 镜 的 各 种 方法 ， 
首先 要 创建 光源 并 指定 光源 位 置 。setlights 函数 中 的 filters[0] 表 示 设 置 的 光源 滤 镜 ， 调 用 clear 
方法 表示 在 每 次 页 面 加 载 时 先 清除 所 有 的 光源 ， 然 后 再 使 用 addcone 方法 创建 锥 形 光源 ， 该 方 
法 中 的 10 个 参数 的 意 1 a 光源 的 X 坐标 ; 第 2 个 参数 ， 光源 的 Y 坐标 ; 第 3 
个 参数 : 光源 离开 页 面 的 高 度 ; 第 4 一 第 6 个 参数 : 光源 的 颜色 ; 第 7 个 参数 : 光源 光 的 色相 ; 
第 8 个 参数 : 光源 的 形状 ; 第 9 个 参数 ， 光源 的 光 的 强度 ; 第 10 个 参数 : 光源 光 散 开 的 范围 。 
如 果 需 要 在 图 片上 添加 多 束 光源 ， 则 可 以 重复 使 用 addcone 方法 ， 但 注意 要 使 用 不 同 的 参数 ， 
否则 光源 处 于 同一 位 置 ， 就 无 法 产生 效果 了 。 函 数 mousehandler 用 来 实现 光束 随 着 鼠标 移动 
的 效果 。 


14.11.4 ”运行 结果 


在 浏览 器 中 查看 Light 滤 镜 的 效果 ， 如 图 14-24 和 图 14-25 所 示 。 


逢 笠 灯 效 采 


14-24 ”光源 照射 图 14-25 ”移动 光束 
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14.11.5 “实例 分 析 


源码 解析 : 
在 这 个 实例 中 ， 使 用 Light 滤 镜 的 同时 也 使 用 了 JavaScript 脚本 。JavaScript 脚本 中 ， 指 定 
了 窗口 加 载 时 执行 函数 setlights(); 并 指定 鼠标 移动 时 执行 的 函数 为 mousehandler()， 也 就 是 当 
筷 标 移动 时 ， 激 发 这 个 函数 ， 并 执行 它 ， 从 而 实现 锥 形 光束 随 着 鼠标 移动 的 效果 。 


14.12 ”制作 遮 淖 字 


所 谓 谈 罩 ， 就 是 使 用 一 个 颜色 图 层 将 包含 文字 或 图 像 等 对 象 的 区 域 遮盖 ,但 是 对 象 却 以 背 
景色 显示 出 来 ， 这 种 效果 在 Web 开发 中 很 常用 。 使 用 CSS 提供 的 Mask 滤 镜 就 可 以 达到 这 样 
的 效果 ， 本 节 将 介绍 Mask 滤 镜 特效 的 使 用 方法 。 


视频 教学 ， 光盘 /视频 /14/14.12 ”制作 遮 哩 字 .avi 人 @@ 长 度 : 3 分钟 


14.12.1 ”基础 知识 一 一 Mask 滤 镜 


Mask 渡 镜 可 以 实现 一 种 遮 罩 效果 ， 所 谓 遮 罩 ， 就 是 使 用 一 个 颜色 图 层 将 包含 有 文字 等 对 
象 的 区 域 遮盖 ,但 是 文字 或 图 像 部 分 却 以 背景 色 显示 出 来 。 简 单 地 说 ， 该 颜色 图 层 就 如 同一 张 
有 颜色 但 透明 的 纸 ， 它 能 够 遮盖 背景 色 却 可 以 将 对 象 的 内 容 显 示 出 来 , 但 是 内 容 的 颜色 由 背景 
色 所 蔡 代 。 


多 | Mask 尖 镜 不 能 应 用 于 图 像 文件 以 实现 相应 的 效果 ， 


Mask 滤 镜 的 语法 格式 如 下 : 
{filter:Mask (enabled=bEnabled , color=sColor)} 


参数 color 用 来 设置 Mask 滤 镜 作用 的 颜色 。 


14.12.2 ”实例 描述 


“ 床 前 明月 光 ， 疑 是 地 上 霜 ”， 这 是 一 种 很 奇妙 的 景象 ， 就 连天 上 的 玉兔 和 地 上 的 白 猫 也 
来 到 了 这 户 人 家 门 前 ， 它 们 很 好 奇 地 向 屋 里 张望 着 ， 希 望 能 看 到 些 什 么 。 于是， 李白 题词 “ 床 
前 明月 光 ”。 


14.12.3 ”实例 应 用 
【 例 14-11】 制 作 遮 单字 


me)>> 
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(1) 新 建 HIML 文件 ， 命 名 为 14-12.html。 
(2) 在 页 面 中 编辑 “ 床 前 明月 光 ” 五 个 大 字 ， 并 使 用 Mask 滤 镜 特效 ， 实 现 遮 四 效果 。 关 


键 代码 如 下 所 示 : 


14. 


<style type="text/css"> 
区 一 
#apDiv4 { 
position:absolute; 
width:77px; 
height:368px; 
z-index:4; 
left: 1l5px; 
top: 17pxs 
font-size:50pt; 
font-weight:bold; 
color:white; 
font-family:' 华 文 行 楷 '; 
filter:mask (color=yellow); 
} 
--> 
</style> 
<body style="background-color:black"> 
<div id="apDiv4"> 床 前 明月 光 </div> 
</body> 


(3) 为 了 能 使 页 面 更 加 漂亮 ， 
(4) 保存 页 面 代 码 。 


可 以 添加 一 些 层 或 其 他 布局 来 优化 这 个 页 面 。 


12.4 ”运行 结 


在 下 浏览 器 中 运行 14-12.html 页 面 ， 查 看 Mask 滤 镜 效果 ， 如 图 14-26 所 示 。 


14-26 ”Mask 滤 镜 效果 


kss Web 开 发 学 习 实录 .入 


14.12.5 ”实例 分 析 


6 源码 解析 : 


在 这 个 实例 中 ， 为 了 显示 需要 的 效果 ， 设 置 背景 色 为 黑色 ， 以 及 字体 颜色 为 白色 ， 并 设置 
Mask 滤 镜 作用 的 颜色 为 黄色 ， 在 浏览 器 中 查看 遮 单 效果 ， 如 图 14-26 所 示 ，“ 床 前 明月 光 ” 
应 用 了 Mask 滤 镜 后 ， 文 字 被 滤 镜 设置 的 颜色 和 覆盖， 而 且 文字 的 颜色 白色 被 背景 色 黑色 所 代替 。 


14.13 ”图 像 淡 入 淡出 


前 面 介 绍 的 BlendTrans 滤 镜 能 够 实现 图 像 的 淡 入 淡出 并 相互 转换 的 特效 , 本 小 节 将 要 介绍 
的 RevealTrans 滤 镜 同样 能 够 实现 图 像 之 间 的 切换 效果 。 


ca 视频 教学 : 光盘 /视频 /14/14.13 ”图 像 淡 入 淡出 .avi O 长 度 : 5 分 名 


14.13.1 基础 知识 一 一 RevealTrans 滤 镜 


RevealTrans 滤 镜 能 够 产生 32 种 动态 效果 ， 例 如 ， 溶 解 、 水 平 (垂直 ) 展 幕 、 百 叶 窗 等 ， 而 
且 还 可 以 从 这 些 动态 效果 中 随机 地 选取 其 中 一 种 效果 进行 切换 。 

RevealTrans 滤 镜 的 语法 格式 如 下 : 

filter : RevealTrans ( enabled=bEnabled, duration=fDuration, 

transition=iTransitionType ) 

其 中 ，enabled 表示 是 否 激活 该 滤 镜 ; duration 用 于 设置 切换 停留 的 时 间 ; transition 用 于 指 
定 转换 方式 ， 即 指定 要 使 用 的 动态 效果 ， 参 数 取 值 是 0 一 23 。transition 参数 值 所 代表 的 动态 效 
果 如 表 14-7 所 示 。 


表 14-7 ”RevealTrans 滤 镜 动态 效果 


动态 效果 参数 值 动态 效果 参数 值 
矩形 从 大 至 小 0 随机 溶解 12 
矩形 从 小 至 大 1 从 上 下 向 中 间 展 开 13 
圆 形 从 大 至 小 pe 从 中 间 向 上 下 展开 14 
圆 形 从 小 至 大 3 从 两 边 向 中 间 展开 15 
向 上 推 开 4 从 中 间 向 两 边 展开 16 
向 下 推 开 5 从 右上 向 左下 展开 
向 右 推 开 6 从 右 下 向 左上 展开 18 
向 左 推 开 7 从 左上 向 右 下 展开 19 
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续 表 


动态 效果 动态 效果 


迁 直 形 百叶 窗 从 左下 向 右上 展开 
水 平 形 百叶 窗 随机 水 平 细 纹 21 
水 平 棋盘 随机 垂直 细 纹 | 22 


随机 选取 一 种 效果 

但 是 ， 如 果 只 设置 transition 参数 来 实现 切换 过 程 ， 那 么 是 不 会 有 任何 效果 的 ， 因 为 动态 
效果 的 实现 还 必须 依靠 脚本 语言 JavaScript 调用 相应 的 方法 。 

对 于 图 片 切换 ， 实 现代 码 与 BlendTrans 滤 镜 的 转换 代码 相似 ， 只 不 过 定义 类 选择 符 样式 规 
则 变 为 

<style type="text/css"> 

.revealtrans { filter:revealTrans (Transition=10,Duration=3)} 

</style> 

然后 ， 在 元 素 img 中 引用 该 样式 规则 即 可 ， 代 码 如 下 : 

<img id="imgpic" class="revealtrans" src="25.jpg"/> 

而 JavaScript 转换 程序 不 用 做 任何 修改 ， 但 是 要 注意 一 点 ， 在 <body> 标 签 中 需要 添加 页 面 
加 载 事件 ， 执 行 playImg0 函 数 ， 这 样 就 完成 了 图 片 淡 入 淡出 的 效果 。 


14.13.2 ”实例 描述 


就 如 前 面 在 讲述 BlendTrans 滤 镜 时 所 说 的 那样 ， 几 张 图 片 轮换 显示 的 效果 是 很 常见 的 , 那 
么 ， 在 学 习 BlendTrans 滤 镜 之 后 ， 或 许 你 感觉 已 经 很 神奇 了 ， 其 实 不 然 ，RevealTrans 滤 镜 与 
BlendTrans 滤 镜 相 比 更 胜 一 筹 。 下 面 就 来 领略 一 下 它 的 神奇 之 处 吧 ! 


14.13.3 ”实例 应 用 


【 例 14-12】 两 张 图 片 渐 入 渐 出 轮换 展示 
(1) 新 建 HIML 文件 ， 命 名 为 RevealTrans.html。 
(2) 在 页 面 中 定义 实现 RevealTrans 滤 镜 特效 的 样式 ，CSS 样式 代码 如 下 : 


.revealtrans { filter:revealTrans (Transition=10,Duration=3) } 


(3) 要 使 用 RevealTrans 滤 镜 特效 实现 两 张 图 片 轮 换 交 蔡 显示 效果 ， 需 要 结合 JavaScript 代 
码 。 编 辑 JavaScript 代码 ， 实 现 两 张 图 片 渐 入 渐 出 轮换 展示 的 特效 ，JavaScript 代码 如 下 所 示 : 
<script language="JavaScriptn> 
// 声 明 数 组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
imgNum=new ImgArray (2) 7 
imgNum[0]="images/67acb7a1387a65b046106437.jpg"; 
imgNum[1]="images/5243525 70.jpg"; 


< 
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// 获 取 数 组 记录 数 
function ImgArray (len){ 
this.length=len; 
} 
Var i=]1; 
// 转 换 过 程 
function PlayImg() 
| 
if (i==1) 
人 
i=0; 
} 
elsef{ 
pe 
} 
imgpic.filters[0] .apply(); 
imgpic.src=imgNum[i]; 
imgpic.filters[0] .play(); 
timeout=setTimeout ('playImg ()',4000); 
} 
</script> 


(4) 在 页 面 中 引入 一 张 图 片 ， 作 为 初始 化 页 面 时 展示 的 图 片 ， 并 在 <body> 标 签 中 定义 
“onload” 事 件 ， 执 行 的 函数 为 上 面 JavaScript 代码 中 定义 的 playImg0 函 数 。 代 码 如 下 : 


<body onload="playImg () "> 
<img src="images/3.jpg" class="revealtrans" id="imgpic"/> 
</body> 


14.13.4 ”运行 结果 


在 浏览 器 中 查看 切换 动态 效果 ， 如 图 14-27 一 图 14-29 所 示 。 


夯 
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图 14-27 第 一 幅 图 片 图 14-28 切换 图 片 
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图 14-29 第 二 幅 图 片 


14.13.5 ”实例 分 析 


i 


从 这 个 实例 中 ， 可 以 看 出 RevealTrans 滤 镜 和 BlendTrans 滤 镜 实现 的 效果 类 似 ， 实 现代 码 
也 相似 ,只 需要 把 类 选择 符 的 样式 规则 改变 一 下 就 能 完成 不 同 的 滤 镜 效果 ,其 他 的 都 不 需要 改变 。 


14.14 ”让 图 像 产 生 波 纹 变 形 
使 用 CSS 中 的 Wave 滤 镜 可 使 页 面 对 象 产生 波纹 变形 , 给 人 一 种 混淆 的 感觉 。 本 节 将 为 大 


家 介绍 Wave 滤 镜 的 使 用 。 


上 视频 教学 ， 光盘 /视频 /14/14.14 ”让 图 像 产生 波纹 变形 .avi GOD 基诺 :14 分 钟 


14.14.1 基础 知识 一 一 Wave 滤 镜 


Wave 滤 镜 可 使 页 面 对 象 产生 波纹 变形 ， 其 语法 格式 如 下 : 


{filter:Wave (enabled=bEnabled,add=pbAddImage, freq=iWaveCount, 
lightstrength=iPercentage,phase=iPercentage,strength=iDistance)} 


各 参数 说 明 如 表 14-8 所 示 。 


人 SS_ web 了 学 习 实录 汪 


表 14-8 ”Wave 滤 镜 参数 


参 数 说 明 

Enabled 设置 滤 镜 是 否 激活 

Add 布尔 值 ， 表 示 是 否 在 原始 对 象 上 显示 效果 。Trme 表示 显示 ; False 表示 不 显示 

Freq 设置 生成 波纹 的 频率 ， 也 就 是 设 定 在 对 象 上 产生 的 完整 的 波纹 的 条 数 

lightStrength 波纹 效果 的 光照 强度 ， 取 值 0 一 100 

Phase 设置 正弦 波 开始 的 偏 移 量 ， 取 百分比 值 0 一 100， 默 认 值 为 0。25 就 是 360x25% 为 90 
度 ，50 则 为 180 度 

Strength 波纹 的 曲折 的 强度 


无 论 在 图 片 还 是 文字 上 应 用 Wave 滤 镜 ， 都 能 实现 波纹 的 效果 ， 实 例 代 码 如 下 : 


原 图 <img src="1403" width="300" height="252" /> 

图 一 <img style="filter:wave (add=false, freq=3,1ightstrength=20,phase=0, strength=5)" 

src="1403.jpg" width="300" height="252" /> 

图 二 <img style="filter:wave (add=false, freq=10, lightstrength=20,phase=45, strength=10)" 

src="1403.jpg" width="300" height="252" /> 

<div style="filter:wave(add=true, freq=3,1lightstrength=100,phase=45, strength=20);"> 
Happly New Year! 

</div> 


代码 中 设置 文字 Wave 滤 镜 中 参数 add 值 为 tue， 表 示 应 用 滤 镜 效果 的 文字 与 未 应 用 的 文 
字 一 同 显示 。 在 浏览 器 中 查看 效果 ， 如 图 14-30 所 示 。 
Wave 泪 樟 Windows Internet Expl 


Be: Docments and Settines\Adninistrator\ 大 面 \4\Fave htal 


CR 


14-30 ”Wave 滤 镜 效果 


14.14.2 ”实例 描述 
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Wave 滤 镜 可 以 给 人 一 种 动态 的 效果 。 下 面 我 们 用 Wave 渡 镜 特效 来 制作 一 张 贺卡 。 


14.14.3 ”实例 应 用 


【 例 14-13】 制 作 波纹 变形 的 新 年 贺卡 
(1) 新 建 HIML 文件 ， 命 名 为 14-13.html。 
(2) 在 页 面 中 使 用 DIV 布局 ， 显 示 新 年 贺卡 页 面 ， 页 面 布 局 代码 如 下 所 示 : 


<div id="apDivl"><img src="images/20081218211217271.jpg"/></div> 


<div id="apDiv2"><img src="images/20071128172813677 2.jpg"/> 


<div id="apDiv3"> 
<img 


style="filter:wave (add=false, freq=3,1ightstrength=20,phase=30, strength=5)" 


src="images/untitled.jpg" width="128" height="128" /> 


</div> 

<div id="apDiv4"> 
<p> 恭 </p> 
<p> 贺 </p> 
<p> 新 </p> 
<p> 年 </p> 

</div> 
</div> 


(3) 编辑 贺卡 的 CSS 样式 代码 ， 使 “apDiv4” 层 产生 波纹 特效 ， 代 码 如 下 : 


#apDivl { 
position:absolute; 
width:168px; 
height:159px; 
z-index:1; 
left: 28px; 
top: 69px; 

} 

#apDiv2 { 
position:absolute; 
width:200px; 
height:780px; 
z=index:28 
left: 12px; 
top: 1l11lpx; 

y 

#apDiv3 { 
position:absolute; 
width:132px; 
height:132px; 


< 
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z-index:1; 
left: 154px; 
top: 248px; 

} 

#apDiv4 { 
position:absolute; 
width:422px; 
height:637px; 
z-index:2; 
left: 421px; 
top: 7px; 


background-image:url (images/he.jpg); 

font-size:70pt; 

font-weight:bold; 

text-align:center; 

Color:#FFFFOO; 

filter:wave (add=true, freq=3,1ightstrength=100,phase=45, strength=20); 
} 


(4) 保存 页 面 。 
14.14.4 ”运行 结果 


在 浏览 器 中 运行 14-13.html 页 面 的 效果 如 图 14-31 所 示 。 


Windows Internet Explorer 
”| 镍 WyDocwment\Css\ 涯 代码 \4\14-13. htal 


帘 安 看 新 年 RR 卡 


14-31 ”产生 波纹 变形 的 新 年 贺卡 
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14.14.5 ”实例 分 析 


6 源码 解析 : 


在 这 个 实例 中 ， 定 义 了 三 个 层 ， 分 别 是 apDiv2 层 、apDiv3 层 和 apDiv2 层 。 其 中 apDiv2 
层 中 容纳 了 贺卡 的 背景 图 片 ， 同 时 也 使 用 了 Wave 滤 镜 特效 ， 使 贺卡 给 人 一 种 动态 感 ; apDiv3 
中 容纳 了 “小 驴 贺 岁 ” 的 图 片 ， 并 使 用 了 Wave 滤 镜 特效 ; apDiv4 中 容纳 了 “恭贺 新 年 ”四 个 
字 ， 也 使 用 了 Wave 滤 镜 特效 ， 也 就 是 说 上 面 的 案例 中 有 3 处 用 到 了 Wave 滤 镜 特效 ， 并 定义 
了 正弦 波 偏 移 量 分 别 为 44、30、45。 在 apDiv4 中 的 文字 使 用 Wave 滤 镜 时 ， 指 定 滤 镜 中 参数 
add 值 为 True， 表 示 应 用 滤 镜 效果 的 文字 与 未 应 用 的 文字 一 同 显示 。 


14.15 鼠标 指针 


经 常 使 用 操作 系统 的 人 们 都 知道 ， 当 把 鼠标 移动 到 不 同 的 地 方 ， 或 执行 不 同 的 操作 时 ， 鼠 
标的 样式 是 不 同 的 。 比 如 ， 当 需要 伸缩 窗口 时 ， 将 鼠标 放置 在 窗口 边沿 处 ， 鼠 标 会 变 成 双向 箭 
头 状 嘻 ， 当 系统 繁忙 时 ， 鼠 标 会 变 成 漏斗 状 8。CSsSs 中 提供 了 能 实现 对 鼠标 样式 控制 的 属性 ， 
本 节 将 介绍 如 何 使 用 CSS 样式 控制 鼠标 指针 。 


ce 视频 教学 : 光盘 /视频 /14/14.15 ”和 鼠标 指针 .avi @@ 长 度 : 3 分钟 


14.15.1 基础 知识 一 一 鼠标 指针 


CSS 不 仅 能 够 准确 地 控制 及 美化 页 面 ， 而 且 还 能 定义 鼠标 指针 的 样式 。 当 鼠标 移动 到 不 同 
的 元 素 对 象 上 面 时 ， 使 鼠标 以 不 同 的 形状 或 图 像 显示 。CSS 通过 改变 cursor 属性 (鼠标 指针 属 
性 ) 来 实现 对 鼠标 样式 的 控制 。 

cursor 属性 包含 17 个 属性 值 ， 对 应 鼠标 的 17 种 样式 ， 而 且 还 能 够 通过 url 的 链接 地 址 自 
定义 鼠标 指针 ， 如 表 14-9 所 示 。 


表 14-9 鼠标 样式 
属性 值 说 明 b 鼠标 样式 
自动 ， 按 照 默认 状态 
auto 自行 改变 s-resize b 
crosshair 精确 定位 十 字 二 W-Tesize 4 
default 默认 鼠标 指针 R e-resize 3 
move 中 se-resize 证 ~ 


< 
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可 


text 


属性 值 说 明 鼠标 样式 属性 值 说 明 鼠标 样式 
help 帮助 Ea nw-resize 箭头 左上 双 ~ 
wait 等 待 及 SW-resize 箭头 左下 双向 


n-resize 箭头 朝 上 双向 1 自 定义 鼠标 指针 


14.15.2 ”实例 描述 


美 图 秀 秀 是 一 款 很 好 用 的 国产 免费 图 片 处 理 软 件 , 软件 的 操作 和 程序 相对 于 专业 图 片 处 理 
软件 如 光影 魔术 手 、Photoshop 比较 简单 ， 因 此 它 很 受 大 家 的 喜爱 。 用 过 美 图 秀 秀 的 同学 还 记 
得 把 鼠标 放 在 要 编辑 的 图 片上 时 的 样式 吗 ? 需要 给 图 片 加 一 个 配饰 , 把 鼠标 放 在 配饰 上 时 的 样 
式 是 怎样 的 呢 ? 下 面 就 来 做 一 个 仿 美 图 秀 秀 主页 的 页 面 。 


14.15.3 ”实例 应 用 


14.15.4 ”运行 结果 


mm >> 


【 例 14-14】 制 作 美 图 秀 秀 主 页 
(1) 新 建 HTML 文件 ， 命 名 为 14-14.html。 


(2) 在 页 面 中 有 两 个 区 域 ， 一 个 是 图 片 主 区域 ， 另 一 个 是 饰品 区 域 。 在 这 两 个 区 域 中 添加 
鼠标 样式 ， 这 两 个 区 域 采用 div 布局 来 实现 ， 代 码 如 下 : 


<div id="apDiv3"> 
<div id="apDiv5"><img src="images/mei5.jpg"/></div> 
<img src="images/mei3.jpg" style="cursor:wait"/> 
</div> 
<div id="apDiv4"> 
<img src="images/mei4.jpg" width="200" height="448" /> 
<div id="apDiv7"><img src="images/mei6.jpg" width="83" height="75" 
style="cursor:pointer;"/></div> 
</div> 
<div id="apDiv6"> 
<img src="images/20081218211217271.jpg" width="200" height="250" 
style="cursor:crosshair"/> 
</div> 


(3) 在 页 面 中 添加 响应 的 CSS 样式 ， 使 之 与 美 图 秀 秀 中 的 主页 相似 。 
(4) 保存 14-14.html 页 面 。 


在 浏览 器 中 查看 鼠标 样式 ， 如 图 14-32 一 图 14-34 所 示 。 


14-34 ” 手 形 鼠 标 样式 


14.15.5 ”实例 分 析 


Samm, 


在 这 个 实例 中 ， 当 息 标 移动 到 人 物 图 像 上 时 ， 样 式 为 一 个 “十 字形 ”; 当 饼 标 移动 到 图 像 
主 区 域 上 时 ， 样 式 为 “沙漏 ”; 当 饼 标 移动 到 配饰 上 时 ， 样 式 为 “ 手 形 ”， 这 些 都 只 需要 改变 
CSS 中 的 cursor 属性 即 可 。 这 里 需要 重点 说 明 的 是 自 定义 鼠 标 样式 ， 为 使 页 面 更 加 美观 ， 许 多 
网 站 使 用 了 各 种 样式 的 和 饼 标 指针 来 代替 传统 的 鼠标 样式 。 鼠标 指针 分 为 静态 饼 标 指针 (.cuD 和 动 
态 筷 标 指针 (ani) 两 类 ， 所 以 自 定义 鼠标 样式 中 url 引用 的 鼠标 指针 的 扩展 名 称 是 .cur 或 .ani， 而 
且 括 号 内 的 名 称 不 需要 引号 ， 即 cursor:url(Arrow.cur)。 


< 
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14.16 ”常见 问题 解答 


14.16.1 ”对 一 个 对 象 同 时 使 用 多 个 滤 镜 的 问题 


对 一 个 对 象 同时 使 用 多 个 滤 镜 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12267-1-1.html 


最 近 闲 来 无 事 ， 就 随便 做 了 个 使 用 滤 镜 特效 的 页 面 ， 但 是 ， 在 页 面 中 我 对 一 个 对 象 同时 使 


用 了 多 个 滤 镜 ， 却 不 起 作用 ， 怎 么 回 事 啊 ?对 一 个 对 象 同时 使 用 多 个 滤 镜 的 语法 是 什么 啊 ? 


【解决 办 法 】 不 明白 如 何 使 用 滤 镜 集合 ， 通 俗 点 讲 就 是 不 知道 如 何 对 一 个 对 象 同时 使 用 多 


个 滤 镜 。 其 实 很 简单 ， 它 的 语法 就 是 : 


filter: 滤 镜 1 滤 镜 2 滤 镜 3…… 
一 定 要 记 住 滤 镜 之 间 有 空格 ， 不 要 写成 : 
filter: 滤 镜 1filter: 滤 镜 2filter: 滤 镜 3…… 
或 者 

filter: 滤 镜 1; 滤 镜 2; 滤 镜 3…… 


14.16.2 ”startx、starty、finishx、finishy 参数 是 否 重要 


startx、starty、finishx、finishy 参数 重要 吗 
网 络 课堂 : http://bbs.itzcn.comythread-12268-1-1.html 


好 多 CSS 教程 中 都 没有 具体 讲解 startx、starty、finishx、finishy 这 两 对 参数 ， 这 些 参数 重 


要 吗 ? 使 用 这 些 参数 可 以 实现 什么 样 的 效果 呢 ? 


【解决 办 法 】CSS 滤 镜 中 的 startx、starty、finishx、finishy 参数 对 于 控制 部 分 滤 镜 的 作用 


范围 是 非常 重要 的 ， 而 对 于 这 两 对 参数 其 后 所 跟 的 数值 众说 纷 纸 ， 初 学 者 可 能 无 法 分 辨 ,在 没 


有 任何 前 置 条 件 限制 下 ， 该 参数 应 该 是 滤 镜 作用 对 象 的 横 纵 坐标 的 百分比 值 。 大 家 可 以 看 下 面 


的 这 个 例子 理解 这 两 对 参数 的 实现 方法 ， 这 是 一 个 简单 的 渐变 效果 代码 : 


<div style="width:800px; height:200px; filter : 
progid:DXImageTransform.Microsoft.Alpha (style=1,opacity=10, finishOpacity=10 
0,startx=0, starty=0, finishx=0, finishy=35) 
progid:DXxImageTransform.Microsoft.Alpha (style=1,opacity=50, finishOpacity=50 
7 StartXx=0, starty=35, finishx=0, finishy=65) 
progid:DXImageTransform.Microsoft.Alpha (style=1,opacity=100, finishOpacity=1 
0,startx=0, starty=65, finishx=0, finishy=100); background:#0033FF;" > 

</div> 
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14.16.3 1E6 中 使 用 CSS 滤 镜 后 链接 无 法 单 击 的 问题 


IE6 中 使 用 CSS 滤 镜 后 链接 无 法 单 击 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12270-1-1.html 


网 上 最 大 众 化 地 解决 下 6 无 法 显示 png 背景 图 片 透明 问题 的 方法 就 是 用 滤 镜 实现 的 ， 代 
码 如 下 


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, 


sizingMethod=scale, src=’images/liBack.png’,no-repeat); 
background:none; 
而 用 了 上 面 的 代码 之 后 会 导致 链接 失效 ， 这 是 为 什么 啊 ? 
【解决 办 法 】 这 个 问题 想必 很 多 人 都 会 遇 到 ， 其 实 解决 办 法 很 简单 ， 只 需要 给 链接 加 上 这 
样 的 代码 即 可 : 
position:relative 
如 下 面 的 代码 : 
* html #nav 1i{ 
filter: progid:DxXxImageTransform.Microsoft.AlphaImageLoader (enabled=true, 
sizingMethod=scale, src=’images/liBack.png’,no-repeat); background:none; 
} 
#nav 1i af 


position:relative; 


} 


14.17 习 题 


1. 填空 题 

(1) 滤 镜 是 将 页 面 元 素 与 背景 混合 ， 从 而 产生 透明 渐变 的 效果 。 而 且 可 以 通过 
改变 数值 来 控制 透明 度 。 如 果 将 Alpha 滤 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参数 ， 就 能 
使 图 像 显示 淡 入 淡出 的 效果 。 

(2) Glow 滤 镜 的 语法 格式 如 下 : 

{filter : Glow ( enabled=bEnabled ，color=sColor ，strength=iDistance ) } 

其 中 ， 参 数 color 设置 的 颜色 ，strength 设置 了 尝 转 的 范围 ， 值 范围 是 1 一 255， 
值 越 大 效果 越 强 。 

(3) 假设 一 张 图 像 需要 实现 光照 的 效果 ， 犹 如 手电 简 照 在 这 张 图 像 上 ， 需 要 使 用 
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滤 镜 。 
(4) 在 页 面 中 实现 仿 Flash 播放 多 张 图 像 动画 的 效果 ， 使 图 像 以 溶解 、 水 平 ( 垂 直 ) 展 幕 、 
百叶 窗 等 样式 显示 与 隐藏 ， 需 要 使 用 滤 镜 。 
2. 选择 题 
(1) Alpha 滤 镜 中 的 style 参数 设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 0 一 
3。 其 中 表示 圆 形 渐变 。 
A. 0 下 ) 名 
(2) 滤 镜 用 于 使 页 面 元 素 产 生 模 糊 效果 ， 甚 至 可 以 产生 高 速 移动 的 动感 效果 。 
A. Blur B. Shadow C. Invert D. Mask 


(3) 下 面 描述 正确 的 是 > 
A，Shadow 滤 镜 和 DropShadow 滤 镜 不 同 的 是 ，Shadow 滤 镜 能 够 在 指定 的 方向 上 设 
置 投影 ， 且 投影 可 产生 渐进 的 效果 ， 而 DropShadow 滤 镜 是 利用 偏 移 量 来 定义 投 
影 位 置 。 
B. Invert 滤 镜 可 以 设置 对 象 中 指定 的 颜色 为 透明 色 。 在 页 面 元 素 中 将 该 滤 镜 应 用 于 
对 象 时 ， 则 对 象 内 容 中 的 指定 颜色 就 变 为 透明 的 ， 即 不 可 见 了 。 
C.FlipV 滤 镜 用 于 水 平 翻转 对 象 ， 即 将 元 素 对 象 按 水 平方 向 进行 180 度 翻转 。 
D. Xray 滤 镜 一 般 应 用 于 图 像 ， 用 来 将 一 幅 图 像 转变 为 灰 度 图 ， 即 图 像 中 的 色彩 全 部 
由 黑 、 白 、 灰 三 种 颜色 所 代替 。 
假设 1404.jpg 图 片上 有 一 灯 粉 色 的 花 杀 ， 那 么 使 用 Gray0) 滤 镜 之 后 ， 如 下 面 的 代码 : 
<img src="images/1404.jpg" width="240" height="210" 
style="filter:Gray ()"/> 
在 页 面 上 输出 的 图 片花 采 闫 色 是 
A.， 让 1404.jpg 图 像 反 映 出 它 的 轮廓 并 将 这 些 轮 廊 加 亮 ， 产 生 的 效果 类 似 于 义 光 片 
B. 花 条 背景 由 白色 变 为 灰色 ， 花 条 变 为 白色 
C. 灰色 
D. 粉色 ， 不 变 
3. 上 机 练习 
上 机 练习 : 设计 椰子 树 水 中 倒影 效果 
使 一 张 椰子 树 的 图 片 在 页 面 的 一 个 层 中 出 现 4 次 ， 存放 顺 序 是 上 面 两 张 ， 下面 两 张 ， 形 成 
一 个 正方 形 。 右 上 角 的 图 片 水 平 翻转 ， 左 下 角 的 图 片 垂直 翻转 ， 右 下 角 的 图 片 水 平 、 重 直 同时 
翻转 形成 一 哥 在 水 中 倒影 的 椰子 桂 ， 如 图 14-35 所 示 。 
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图 14-35 ”椰子 树 水 中 倒影 效果 
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工作 效率 


内 容 摘 要 : 

随 着 计算 机 的 逐渐 普及 ， 越 来 越 多 的 人 开始 将 网 络 作为 一 种 娱乐 消 遗 的 平台 。 娱 乐 类 的 网 
站 即 是 通过 网 络 这 个 平台 ， 给 用 户 提供 各 种 娱乐 服务 的 网 站 ， 要 想 让 网 站 视觉 效果 更 加 美观 ， 
在 这 里 我 首先 推荐 使 用 Dreamweaver 进行 布局 编写 页 面 。 

Dreamweaver 是 一 个 专业 的 HTML 编辑 器 ， 用 于 对 Web 站 点 、Web 网 页 和 Web 应 用 程序 
进行 设计 、 编 码 与 开发 。 无 论 使 用 者 喜欢 直接 编写 HTML 代码 ， 还 是 偏爱 在 可 视 化 编辑 环境 
中 工作 ，Dreamweaver 都 能 够 提供 众多 的 帮助 工具 ， 丰 富 使 用 者 的 网 页 创作 体验 。 


学 习 目标 : 


学 会 使 用 CSS 面板 创建 样式 的 方法 
掌握 保存 CSS 文件 到 本 地 的 方法 
熟悉 在 面板 中 添加 CSS 的 背景 属性 
掌握 制作 二 级 导航 菜单 的 方法 
掌握 制作 图 片 展示 的 方法 
掌握 制作 常识 问答 方法 

掌握 制作 Spry 表单 方法 


15.1 使 用 Dreamweaver 完成 网 站 设计 


在 网 页 开发 领域 ，CSS 页 面 布 局 占据 了 很 大 的 分 量 。 为 了 方便 创建 一 个 合理 布局 的 页 面 ， 
可 以 使 用 Dreamweaver。 这 节 就 通过 Dreamweaver 开发 工具 来 创建 CSS 样式 信息 。 


FP Ss 
四， 视频 教学 : 光盘 /视频 /15/15.1 使 用 Dreamweaver 完成 网 站 介绍 .avi 全 长 度 :10 分钟 


15.1.1 基础 知识 一 一 使 用 Dreamweaver 编写 HTML 信息 


HTML 是 一 种 简单 易学 的 标记 语言 ， 分 为 文档 头 与 文档 体 两 部 分 。 在 文档 头 中 对 这 个 文档 
进行 一 些 必 要 的 定义 ， 文 档 体 中 是 要 显示 的 各 种 文档 信息 。 最 简单 的 网 页 HTML 代码 如 下 : 

<html> 

<head> 

<title> 首 页 </title> 

</head> 

<body> 

正文 内 容 

</body> 

</html> 

其 中 <html></html> 在 最 外 层 ， 表 示 这 对 标记 间 的 内 容 是 HTML 文档 ; <head></head> 之 间 
包括 文档 的 头 部 信息 ， 比 如 文档 标题 ，<body></body> 之 间 是 正文 内 容 部 分 。 

Dreamweaver 是 一 个 所 见 即 所 得 的 编辑 器 , 对 HTML 代码 具有 非常 强大 的 编辑 功能 。 它 允 
许 我 们 在 代码 检查 器 、 代 码 视 图 与 拆 分 视图 中 分 别 进行 查看 与 编辑 。 

1. 代码 检查 器 


Dreamweaver 中 的 代码 检查 器 是 专门 用 来 查看 与 编辑 HTML 代码 的 ， 执 行 “窗口 ”| 
“代码 检查 器 ”命令 (快捷 键 F10)， 打 开 “ 代 码 检查 器 ”对 话 框 ， 其 中 包括 了 各 种 编码 工具 ， 
如 图 15-1 所 示 。 

图 15-1 则 是 使 用 Dreamweaver 工具 编写 代码 的 面板 ， 同 样 还 可 以 在 这 个 面板 内 进行 修改 、 
添加 和 删除 CSS 样式 信息 等 。 编 码 工具 栏 中 的 各 种 工具 名 称 及 功能 简介 如 表 15-1 所 示 。 
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图 15-1 “代码 检查 器 ”对 话 框 
表 15-1 编码 工具 栏 中 的 各 种 工具 名 称 及 其 作用 


名 称 图 标 
打开 文档 EI 
折合 整个 标签 如 


作 用 
单 击 该 按钮 显示 代码 所 在 文件 的 路 径 
单 击 该 按钮 将 所 有 代码 折合 在 一 起 ， 如 果 按 住 Alt 键 单 击 ， 则 可 以 折 县 外 部 


标签 


单 击 该 按钮 将 选中 的 代码 折 营 在 一 起 ， 如 果 按 住 Alt 键 单 击 ， 则 可 以 折叠 外 


部 标签 


折合 所 选 甘 
扩展 全 部 芋 
选择 父 标签 多 


选取 当前 代码 段 全 


单 击 该 按钮 可 以 将 所 有 折 和 登 的 代码 展开 
单 击 该 按钮 则 将 <html> 与 </html> 之 间 的 代码 选中 
单 击 该 按钮 选中 鼠标 所 在 的 JavaScript 代码 段 


行 叶 二 单 击 该 按钮 显示 或 者 隐藏 代码 视图 中 的 代码 行 号 


高 亮 显示 无 效 代码 | 名 启用 该 按钮 则 可 以 显示 代码 中 的 无 效 代码 


单 击 该 按钮 后 弹出 菜单 ， 其 中 “应 用 HTML 注释 ”命令 为 静态 网 页 代码 中 
的 注释 标签 ，“ 应 用 /* */ 注 释 ” 命 令 应 用 于 CSS 样式 中 的 注释 ，“ 应 用 // 注 


Bi 释 ” 命 令 应 用 于 JavaScript 代码 中 的 注释 , “应 用 "注释 ”命令 为 动态 网 页 代 
码 中 的 注释 标签 

删除 注释 选中 代码 中 的 注释 后 单 击 该 按钮 ， 则 会 将 注释 标签 删除 

环绕 标签 选中 代码 单 击 该 按钮 ， 则 为 其 添加 围 堵 标签 。 单 击 该 按钮 后 在 代码 视图 中 会 
显示 围 堵 标 签 列表 ， 从 中 可 以 选择 要 添加 的 标签 

单 击 该 按钮 ， 在 弹出 的 菜单 中 会 显示 最 近 使 用 的 JavaScript 代码 名 称 ， 以 及 
最 近 的 代码 片段 «代码 片段 ”面板 命令 
缩 进 代码 单 击 该 按钮 可 以 将 光标 所 在 的 代码 缩 进 ， 使 其 具有 递 进 关系 


凸 出 代码 


上 


单 击 该 按钮 可 以 将 光标 所 在 的 代码 向 前 凸 出 


格式 化 源 代码 


ie 


单 击 该 按钮 弹出 菜单 ， 其 中 “套用 源 格 式 ”命令 是 将 选中 的 代码 以 标准 格式 
显示 ， 而 “代码 格式 设置 ”和 “编辑 标签 库 ” 命 令 则 可 以 编辑 代码 格式 


< 
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编码 工具 栏 包含 可 用 于 执行 多 种 标准 编码 操作 的 按钮 ， 例 如 折合 和 展开 所 选 代码 、 应 用 和 
删除 注释 、 缩 进 代码 、 揪 入 最 近 使 用 过 的 代码 片段 等 。 下 面 介绍 如 何 使 用 “ 缩 进 代码 ”按钮 兰 
使 HTML 代码 具有 递 进 关 系 ， 首 先 将 光标 放置 在 要 缩 进 的 代码 左 侧 或 者 选中 该 代码 ， 然 后 单 
击 “ 缩 进 代码 ”按钮 专 ， 如 图 15-2 所 示 ， 即 可 将 代码 向 右 缩 进 ， 如 图 15-3 所 示 。 
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图 15-2 ”选择 缩 进 代码 按钮 15-3 ” 缩 进 后 的 代码 
\ 
4 | 代码 缩 进 与 设计 视图 中 的 文本 缩 进 操作 方法 相同 。 


2. 代码 视图 与 拆 分 视图 

Dreamweaver 文档 编辑 窗口 中 有 三 种 查看 文档 的 方式 ， 分 别 为 代码 视图 、 拆 分 视图 和 设计 
视图 。 分 别 单 击 不 同 的 视图 按钮 ， 窗 口中 就 会 显示 相应 的 编辑 视图 ， 其 中 代码 视图 与 拆 分 视图 
均 可 以 查看 与 编辑 HTML 代码 。 

单 击 文档 工具 栏 上 的 “显示 代码 视图 ”按钮 回 晤 |， 文 档 窗口 就 切换 到 代码 视图 状态 ， 如 
图 15-4 所 示 。 发 现 编码 工具 栏 也 放置 在 代码 视图 左 侧 ， 所 以 同样 可 以 在 该 视图 中 编辑 代码 。 
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图 15-4 ”代码 视图 
单 击 文档 工具 栏 上 的 “显示 代码 视图 和 设计 视图 ”按钮 匿 锅 ， 文 档 窗口 就 会 切换 到 拆 分 


第 15 章 ”使 用 Dreamweaver 提高 工作 效率 到 


视图 状态 ， 如 图 15-5 所 示 。 这 样 在 设计 视图 中 编辑 网 页 元 素 ， 同 时 会 在 代码 视图 中 看 到 相应 
的 变化 。 
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15-5 ” 拆 分 视图 


15.1.2 ”基础 知识 一 一 使 用 CSS 面板 创建 样式 


在 页 面 内 创建 CSS 样式 的 方法 有 很 多 种 ， 例 如 说 直接 编写 和 自动 生成 等 多 种 方式 ， 这 节 
主要 介绍 如 何 使 用 CSS 面板 来 创建 CSS 样式 。 

首先 打开 Dreamweaver 文档 编辑 器 ， 选 择 Dreamweaver 工具 菜单 栏 中 的 “窗口 ”|“CSS 
样式 ”命令 ， 此 时 在 右 侧 将 会 显示 如 图 15-6 所 示 的 面板 。 
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图 15-6 打开 CSS 面板 
接 下 来 单 击 CSS 样式 面板 右 下 角 的 “新 建 CSS 规则 ”按钮 ， 此 时 将 会 弹出 “新 建 CSS 规 
则 ”对 话 框 ， 详 细 结 果 如 图 15-7 所 示 。 
在 “新 建 CSS 规则 ”对 话 框 内 有 “选择 器 类 型 ”、“ 选 择 器 名称 ”和 “规则 定义 ”3 个 下 
拉 列 表 框 。 


< 
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@ “选择 器 类 型 ”下 拉 列 表 框 中 有 “类 ”、“ID”、“ 标 签 ” 和 “符合 内 容 ” 等 选项 ， 
通过 设置 不 同 的 选项 可 以 定义 CSS 样式 的 类 型 规则 。 

@ “选择 器 名 称 ” 下 拉 列 表 框 中 默认 是 没有 值 的 ， 它 是 用 来 定义 CSS 样式 的 选择 器 名 
称 的。 在 这 里 可 以 对 它 进行 编辑 ,同样 当选 择 “ 选 择 器 类 型 ”下 拉 列 表 框 中 的 “标签 ” 
时 ， 该 下 拉 列 表 框 中 将 会 显示 很 多 种 标签 的 名 称 以 供 选 择 。 

@ “规则 定义 ”下 拉 列 表 框 内 有 “ 仅 限 该 文 要 ”和 “新 建 样式 表 文 件 ” 两 个 选项 ， 主 要 
用 来 保存 定义 规则 的 位 置 。 
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图 15-7 “新 建 CSS 规则 ”对 话 框 
通过 设置 以 上 3 个 选项 的 相关 信息 可 以 对 CSS 规则 进行 定义 ， 首 先 设置 “选择 器 类 型 ” 
下 拉 列 表 框 选项 为 “标签 ”， 接 下 来 设置 “选择 器 名 称 ” 下 拉 列 表 框 选项 为 “div”， 最 后 设 
置 “ 规 则 定义 ”下 拉 列 表 框 的 选项 为 “ 仅 限 该 文档 ”， 如 图 15-8 所 示 。 


图 15-8 定义 CSS 规则 


此 时 ， 设 置 完成 后 单 击 “ 确 定 ”按钮 ， 将 会 弹出 “div 的 CSS 规则 定义 ”对 话 框 ， 如 图 15-9 
所 示 。 

“div 的 CSS 规则 定义 ”对 话 框 由 “分 类 ”和 “分 类 详细 信息 模块 ”两 部 分 组 成 ， 其 中 在 
“分 类 ”项 中 有 类 型 、 背 景 、 区 块 、 方 框 、 边 框 、 列 表 、 定 位 和 扩展 等 选项 。 通 过 选择 “分 类 ” 
中 的 各 项 ， 可 以 对 该 项 中 的 详细 信息 进行 设置 ， 如 图 15-10 所 示 。 
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图 15-9 “div 的 CSS 规则 定义 ”对 话 框 
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图 15-10 添加 背景 样式 对 话 框 


选择 “分 类 ”项 后 ， 在 右边 会 出 现 对 应 的 属性 信息 。 例 如 ， 当 我 们 选择 了 背景 选项 后 ， 右 
边 则 会 显示 关于 设置 背景 的 所 有 属性 。 配 置 好 相应 的 属性 后 单 击 “ 确 定 ” 按 钮 将 会 生成 CSS 
样式 信息 ， 详 细 代码 如 下 : 


<html> 
<head> 

<title> 首 页 </title> 
<style type="text/css"> 

lr 

div { 

} 

body { 
background-attachment: fixed; 
background-color: #FFF; 
background-image: Url (f474e2ef2d60f4d5b3fb9545.jpg); 
background-repeat: repeat; 
background-position: center center; 


} 


一 -> 
</style> 
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</head> 
<body> 
<div> 正 文 内 容 </div> 
</body> 
</html> 
上 述 代 码 中 的 background-attachment 属性 、background-color 属性 等 ， 这 些 样式 都 是 添加 
背景 样式 时 使 用 CSS 面板 设置 而 生成 的 。 
在 CSS 面板 右 下角 还 有 3 个 功能 按钮 ， 即 “附加 样式 表 ”、“ 编 辑 样 式 表 ”和 “删除 CSS 
规则 ”。 这 些 按钮 可 以 对 页 面 的 样式 进行 操作 。 例 如 ， 单 击 “ 删 除 CSS 规则 ”按钮 ， 可 以 通 
过 CSS 面板 删除 某 个 样式 信息 ， 如 图 15-11 所 示 。 


(By + 2. 2- | 话 压 " -ox 


交 件 J” 饥 答 ( 昌 ” 查 看 (J 手中 佣 滩 虽 格式 0) 生 信 四 如 点 5 二 DID 天 用 曙 


15-11 CSS 面板 其 他 按钮 
“附加 样式 表 ” 按 钮 则 可 以 将 本 地 的 CSS 文件 引入 当前 页 面 。 使 用 该 功能 时 需要 单 击 此 
按钮 打开 如 图 15-12 所 示 的 对 话 框 。 
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图 15-12 “连接 外 部 样式 表 ” 对 话 框 
在 该 对 话 框 内 找到 需要 引入 的 CSS 样式 文件 ， 单 击 “ 确 定 ” 按 钮 即 可 完成 引入 操作 。 
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每 个 网 站 都 会 有 这 样 的 一 个 页 面 ， 用 来 为 用 户 提供 一 些 有 用 的 信息 。 这 些 信息 可 以 让 用 户 
在 第 一 时 间 了 解 该 网 站 为 用 户 提供 的 服务 ， 从 而 有 选择 地 进行 操作 。 那 么 ， 这 个 介绍 页 面 必须 
设计 得 美观 而 且 大 方 ， 可 以 通过 使 用 CSS 面板 对 此 页 面 的 介绍 信息 的 字体 进行 设计 。 


15.1.3 ”实例 描述 


15.1.4 ”实例 应 用 


【 例 15-1】 网 站 介绍 

在 动手 制作 之 前 , 首先 需要 将 页 面 布局 设计 好 。 接 下 来 通过 使 用 Dreamweaver 编辑 器 中 的 
CSS 面板 工具 添加 样式 。 选 择 需 要 添加 样式 的 标签 ， 单 击 “ 新 建 CSS 规则 ”按钮 打开 “新 
建 CSS 规则 ”对 话 框 ， 如 图 15-13 所 示 。 


图 15-13 “新 建 CSS 规则 ”对 话 框 


此 时 在 “新 建 CSS 规则 ”对 话 框 内 会 有 “不 太 具体 ”和 “更 具体 ”两 个 按钮 ， 用 来 设置 
Css 样式 的 范围 。 如 果 单 击 了 “不 太 具 体 ” 按 钮 ， 则 会 以 “选择 添加 样式 的 标签 ”为 主 添加 样 
式 ， 凡 是 使 用 该 标签 都 会 套用 此 样式 。 如 果 单 击 了 “更 具体 ”按钮 ， 则 会 以 ID 为 主 显示 样式 
范围 


接 下 来 单 击 “ 确 定 ”按钮 进入 “CSS 规则 定义 ”对 话 框 ， 选 择 需要 的 样式 信息 ， 如 图 15-14 
所 示 。 

字体 属性 设置 完成 后 ， 单 击 “ 确 定 ”按钮 ， 则 会 在 页 面 最 顶端 的 style 标签 内 生成 字体 样 
式 属性 信息 ， 详 细 代码 如 下 所 示 : 


<style type="text/css"> 

#container #article -title .about p { 
font-family: Tahoma，Geneva，sans-serif;/* 字 体 类 型 */ 
font-size: 12px;/* 字 体 大 小 */ 
font-style: italic;/* 字 体 样式 */ 


< 全 ——— 


En - 必 


line-height: 25px;/* 行 高 */ 
font-weight: normal;/* 粗 细 */ 
font-variant: normal;/* 变 体 */ 
text-transform: none;/* 大 小 写 */ 
color: #66Ci;V* 字 体 颜色 */ 
text-decoration: underline;/* 修 饰 */ 

} 

</style> 


上 述 代码 中 是 通过 设置 字体 样式 而 生成 的 样式 代码 ， 其 中 font-size 用 来 设置 字体 的 大 小 ， 
font-weight 用 来 设置 字体 的 粗细 ，color 用 来 设置 字体 的 颜色 等 。 
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15-14 “CSS 规则 定义 ”对 话 框 


15.1.5 ”运行 结果 
在 浏览 器 中 运行 aboutus.html 页 面 ， 如 图 15-15 所 示 。 
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15.1.6 ”实例 分 析 


pe 


上 述 实例 中 使 用 CSS 面板 创建 了 设置 字体 属性 的 一 些 信息 。 同 样 ， 还 可 以 使 用 CSS 面板 
来 设置 一 些 图 片 和 页 面 的 样式 以 及 超 链接 等 样式 信息 。 因 此 大 家 在 使 用 CSS 面板 创建 样式 时 
一 定 要 活 学 活用 。 


15.2 ”将 网 站 介绍 页 面 样式 保存 至 本 地 


这 节 讲 解 的 内 容 非常 简单 ， 保 存 CSS 文本 到 本 地 站 点 。 现 在 仍然 有 很 多 人 不 知道 将 CSS 
保存 到 本 地 站 点 与 页 面 内 有 什么 区 别 ， 在 本 节 就 来 讲解 将 CSS 代码 分 离 成 单独 文件 有 什么 
好 处 。 


视频 教学 : 光盘 /视频 /15/15.2 将 网 站 介绍 页 面 样式 保存 至 本 地 .avi 人 @ 长 度 ; 5 分 钟 


15.2.1 ”基础 知识 一 一 保存 CSS 文件 到 本 地 站 点 


之 所 以 将 CSS 文件 单独 提取 出 来 作为 一 个 文件 保存 在 本 地 站 点 ， 是 因为 这 样 可 以 大 大 地 
减少 页 面 上 的 代码 量 ， 以 方便 以 后 对 页 面 进行 维护 。 有 时 ， 可 能 页 面 布局 比较 复杂 ， 使 用 样式 
比较 多 ， 如果 把 所 有 的 样式 信息 都 写 入 页 面 ， 那 么 会 加 大 后 期 维护 的 难度 ， 如果 将 整个 站 点 的 
样式 信息 都 保存 到 一 个 CSS 文件 中 ， 当 页 面 布 局 出 现 问题 或 者 需要 扩展 布局 样式 时 ， 只 需要 
打开 CSS 样式 文件 修改 即 可 。 接 下 来 就 讲解 如 何 使 用 Dreamweaver 工具 将 书写 好 的 CSS 样式 
以 文件 的 形式 保存 到 本 地 站 点 。 

首先 在 页 面 内 新 建 CSS 规则 ， 如 图 15-16 所 示 。 
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图 15-16 新 建 CSS 规则 
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单 击 “ 新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ”对 话 框 ， 如 图 15-17 所 示 。 
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图 15-17 “新 建 CSS 规则 ”对 话 框 


在 “规则 定义 ”下 拉 列 表 框 内 默认 有 两 个 值 ， 即 “ 仅 限 该 文档 ”和 “新 建 样式 表 文件 ” 选 
项 。 当 页 面 内 已 经 嵌入 了 一 个 外 部 的 CSS 文件 时 ， 在 这 里 面 则 会 显示 嵌入 外 部 样式 文件 的 名 
称 选 项 。 在 这 里 启用 “新 建 样式 表 文 件 ” 选 项 ， 单 击 “ 确 定 ”按钮 打开 “将 样式 表 文 件 另存 为 ” 
对 话 框 ， 如 图 15-18 所 示 。 
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15-18 “将 样式 表 文 件 另存 为 ”对 话 框 


在 该 对 话 框 中 选择 指定 保存 路 径 和 文件 名 等 信息 ， 单 击 “ 保 存 ” 按 钮 打开“CSS 规则 定 
义 ”对 话 框 ， 如 图 15-19 所 示 。 
在 该 对 话 框 中 保持 默认 参数 不 变 ， 单 击 “ 确 定 ” 按 钮 ， 将 所 有 样式 信息 以 文件 的 形式 保存 
到 style.css 文件 中 ，style.css 文件 详细 代码 如 下 : 
charset "utf-8"; 
body { 
font-family: Verdana, Geneva, sans-serif; 


font~size: 12px» 
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Eont-style: normal; 
line-height: 20px; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
color: #C3F; 
text-decoration: underline; 
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图 15-19 “CSS 规则 定义 ”对 话 框 
上 述 代码 保存 在 style.css 样式 表 的 样式 信息 中 ， 在 页 面 内 会 自动 生成 以 下 代码 : 


<link href="style.css" rel="stylesheet" type="text/css" /> 


该 代码 大 家 肯定 不 陌生 ， 因 为 它 是 用 来 将 外 部 样式 表 引 入 当前 页 面 的 。 


15.2.2 ”实例 描述 


在 15.1 节 讲解 了 如 何 设计 网 站 介绍 页 面 ， 本 节 仍然 以 “网 站 介绍 页 面 ”为 例 进行 讲解 。 在 
本 实例 中 ， 将 要 把 生成 的 CSS 文件 保存 到 本 地 服务 器 ， 同 时 页 面 也 将 引用 该 文件 样式 信息 。 
此 外 ,通过 该 样式 文件 中 的 样式 信息 将 会 映射 页 面 的 布局 和 显示 方式 ， 从 而 完成 页 面 代码 的 合 
理 分 类 。 


15.2.3 ”实例 应 用 
【 例 15-2】 网 站 介绍 页 面 


首先 ， 通过 Dreamweaver 工具 打开 窗 内 网 网 站 介绍 页 面 。 然 后 打开 “CSS 样式 ”面板 新 建 
样式 规则 ， 如 图 15-20 所 示 。 
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图 15-20 CSS 样式 面板 
单 击 “ 新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ”对 话 框 ， 如 图 15-21 所 示 。 


图 15-21 “新 建 CSS 规则 ”对 话 框 
下 面 设置 一 些 基 本 的 规则 信息 。 以 p 元 素 为 主 样式 ， 将 样式 信息 以 新 建 样式 表 文 件 保存 至 
本 地 ， 单 击 “ 确 定 ” 按 钮 ， 打 开 “ 将 样式 表 文 件 另 存 为 ”对 话 框 ， 如 图 15-22 所 示 。 
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15-22 “将 样式 表 文 件 另 存 为 ”对 话 框 
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将 样式 文件 保存 至 本 地 项 目下 的 style 下 ， 将 文件 命名 为 ch2style.css， 单 击 “ 保 存 ” 按 钮 
进行 保存 。 此 时 将 会 弹出 “CSS 规则 定义 (ch2style.css 中 )” 对 话 框 ， 如 图 15-23 所 示 。 
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图 15-23 “CSS 规则 定义 (ch2style.css 中 )” 对 话 框 


设置 相关 的 样式 信息 ， 单 击 “ 确 定 ” 按 钮 ， 在 项 目 style 目录 下 将 会 生成 名 为 ch2style.css 
的 文件 ， 该 文件 能 保存 的 代码 如 下 : 


@charset "utf-8"; 

#container #article .title .about p { 
font-family: Tahoma，Geneva，sans-serif;/* 字 体 类 型 */ 
font-size: 12px;/* 字 体 大 小 */ 
font-style: italic;/* 字 体 样式 */ 
line-height: 25px;/* 行 高 */ 
font-weight: normal;/* 粗 细 */ 
font-variant: normal;/* 变 体 */ 
text-transform: none;/* 大 小 写 */ 
color: #66C; /* 字 体 颜 色 */ 
text-decoration: underline;/* 修 饰 */ 


} 
除了 上 述 代码 外 ， 同 时 也 会 生成 如 下 代码 : 


<link href="style/ch2style.css" rel="stylesheet" type="text/css" /> 


15.2.4 ”运行 结果 


接 下 来 保存 页 面 ， 在 浏览 器 中 运行 aboutus.html 页 面 ， 效 果 如 图 15-24 所 示 。 


< 人 mm 


图 15-24 ”网 站 介绍 运行 效果 


15.2.5 ”实例 分 析 


此 源码 解析 : 


在 这 个 实例 中 通过 设置 页 面 字体 样式 生成 CSS 代码 ， 将 代码 以 文件 的 形式 保存 至 本 地 服 
务 器 , 以 便于 以 后 维护 ,因此 该 项 目 通过 使 用 Dreamweaver 工具 中 的 CSS 面板 生成 CSS 文件 。 


15.3 ”为 网 站 介绍 页 面 添加 背景 颜色 


在 网 站 开发 的 过 程 中 ， 难 免 要 对 一 个 已 有 的 样式 进行 修改 。 为 了 方便 程序 员 把 时 间 充 分 放 
在 程序 的 设计 上 ，CSS 样式 面板 提供 了 在 原 有 样式 上 直接 添加 、 修 改 和 删除 等 操作 。 本 节 将 会 
讲解 如 何 直 接 为 网 站 页 面 添加 背景 颜色 。 


-a 视频 教学 : 光盘 /视频 /15/15.3 ”为 网 站 介绍 页 面 添加 背景 颜色 .avi 人 @O 长 度 : 4 分 钟 
15.3.1 实例 描述 
本 实例 主要 通过 在 面板 中 直接 添加 CSS 背景 属性 ， 生 成 CSS 样式 文件 来 制作 ， 同 样 ， 还 


借助 15.2 节 中 的 实例 进行 整个 项 目的 设计 。 另 外 要 知道 的 是 ， 所 谓 的 直接 添加 CSS 背景 属性 
就 是 将 原 有 的 属性 文件 选中 ， 通 过 CSS 面板 直接 添加 背景 样式 ， 而 不 是 重新 创建 样式 表 。 


15.3.2 ”实例 应 用 


【 例 5-3】 为 网 站 介绍 页 面 添加 背景 颜色 
首先 通过 Dreamweaver 打开 之 前 制作 的 介绍 页 面 ， 再 在 页 面 添 加 CSS 背景 属性 ， 打 开 
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CSS 样式 面板 ， 在 该 面板 内 有 “所 有 规则 ”和 “属性 ”两 个 模块 ， 如 图 15-25 所 示 。 


By I 2 a [ -x 
文件 虽 ”总 可 四 查看 四 插入 修改 昌 格式 芭 命 人 加 站 点 3 窗口 D 各 助 吧 


图 15-25 CSS 样式 面板 


“所 有 规则 ”模块 用 于 在 显示 之 前 创建 样式 名 称 ， 当 选择 定义 好 的 CSS 样式 名 称 时 ， 该 
属性 模块 则 会 显示 相关 属性 。 此 时 在 所 有 属性 的 最 下 端 有 一 个 “添加 属性 ”的 超 链接 ， 单 击 超 
链接 就 可 以 对 该 样式 直接 添加 样式 属性 ， 如 图 15-26 所 示 。 


四 四 ->，&v | 话 便 。 -x 
ET 


Pd 


es 
aiv e1000-nne: 

< qrneader><A classmlog titie 
re 
Class=logir 

a hreto"hrep: /one.itzen.com/ gpace-22418. html”™ 


图 15-26 直接 添加 背景 属性 


在 图 片 中 设置 该 样式 的 background-color 属性 ， 从 而 来 改变 页 面 的 背景 颜色 。 使 用 同样 的 
方法 还 可 以 设置 页 面 的 背景 图 片 等 相关 样式 属性 ， 此 时 将 会 在 定义 好 的 CSS 文件 内 添加 如 
下 代码 : 


background-color: #DAFSFE; 


如 果 在 编辑 过 程 中 发 现 选 错 了 属性 ， 还 可 以 进行 删除 和 修改 ， 如 图 15-27 所 示 。 
在 这 里 只 需 在 需要 进行 删除 或 编辑 的 样式 中 进行 操作 即 可 ， 经 过 修改 或 者 删除 操作 后 的 
CSS 文件 也 会 做 出 相应 的 更 改 。 


<@——— 


A 开发 学 习 实录 . 


圈 男 -ss | 泛 乙 ” -ox 
ET 


15-27 ”编辑 和 删除 功能 


15.3.3 ”运行 结果 
接 下 来 保存 修改 后 的 结果 ， 在 浏览 器 中 运行 aboutus html 页 面 ， 效 果 如 图 15-28 所 示 。 


SO EB us ot Ml 
请 怕 委 天 。 忽 委 办 瘤 - 锅 W 的 本 ] 
图 书 推荐 。 个 人 中 心 。。 曾 内 论坛 效 内 博客 


15-28 ”网 站 介绍 页 面 


15.3.4 实例 分 析 


sm. 


在 这 个 实例 中 ,通过 定义 好 的 样式 ， 可 以 直接 为 页 面 添加 该 样式 的 背景 属性 和 相关 的 样式 
信息 。 同 样 在 使 用 的 过 程 中 ， 如 果 发 现 不 需要 的 属性 或 者 需要 修改 的 属性 ， 都 可 以 直接 通过 
CSS 面板 进行 删除 和 修改 。 这 样 就 避免 了 再 次 打开 文件 修改 页 面 的 样式 信息 的 过 程 。 
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15.4 设置 首页 导航 


ES 


菜单 栏 组 件 是 一 组 可 导航 的 菜单 按钮 ， 当 访问 者 将 鼠标 指向 其 中 的 某 个 按钮 上 时 ， 将 显示 
相应 的 子 菜单 。 使 用 菜单 栏 可 以 在 紧凑 的 空间 中 显示 大 量 可 导航 信息 ， 并 使 访问 者 无 须 深入 浏 
览 即 可 了 解 网 站 中 提供 的 内 容 。 


视频 教学 ， 光盘 /视频 /15/15.4 设置 首页 导航 avi Ok 度 : 8 分 名 


Spry 框架 是 一 个 可 以 用 来 构建 更 加 丰富 的 Web 页 的 JavaScript 和 CSS 库 。 使 用 该 框架 ， 
可 以 显示 XML 数据 ， 并 可 创建 用 来 显示 动态 数据 的 交互 式 页 面 元 素 ， 而 无 需 刷 新 整个 页 面 。 
以 前 创建 Spry 框架 是 通过 代码 完成 的 ， 这 需要 有 一 定 的 JavaScript 基础 知识 的 用 户 使 用 。 而 
Dreamweaver CS4 在 设计 视图 中 新 增 了 创建 Spry 框架 的 组 件 ， 使 复杂 的 Spry 框架 创建 变 成 了 
简单 的 可 视 化 操作 。 

Spry 框架 支持 一 组 用 标准 HTML、CSS 和 JavaScript 编写 的 可 重用 组 件 。Spry 组 件 是 一 
个 页 面 元 素 ， 通 过 用 户 交互 来 提供 更 加 丰富 的 用 户 体验 。 每 一 个 Spry 组 件 均 由 以 下 几 个 部 分 
组 成 。 

@ 组 件 结构 : 用 来 定义 组 件 结构 组 成 的 HTML 代码 块 。 

@ ”组 件 行为 : 用 来 控制 组 件 如 何 响应 用 户 启动 事件 的 JavaScript。 

@ 组 件 样式 : 用 来 指定 组 件 外 观 的 CSS。 

在 Dreamweaver CS4 中 ， 所 有 的 Spry 组 件 集中 在 “插入 ”工具 栏 的 Spry 选项 卡 中 ,方便 
归 类 与 创建 ， 如 图 15-29 所 示 。 


四 四 ca- | WH -co 
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15-29 “插入 ”工具 栏 中 的 Spry 组 件 


Spry 框架 中 的 每 个 组 件 都 与 唯一 的 CSS 和 JavaScript 文件 相关 联 。CSS 文件 中 包含 设置 组 
件 样式 所 需 的 全 部 信息 ， 而 JavaScript 文件 则 赋予 组 件 功能 。 当 使 用 Dreamweaver 界面 插入 组 
件 时 ，Dreamweaver 会 自动 将 这 些 文件 链接 到 页 面 ， 以 便 组 件 中 包含 该 页 面 的 功能 和 样式 。 

与 给 定 组 件 相 关联 的 CSS 和 JavaScript 文件 根据 该 组 件 命名 。 因 此 ， 用 户 很 容易 判断 哪些 
文件 对 应 于 哪些 组 件 。 


< 全 


'* 开发 学 习 实录 -和 


人 @@， 当 用 户 在 已 保存 的 页 面 中 插入 组 件 时 ，Dreamweaver 会 在 站 点 中 创建 一 个 
提示 [ SpryAssets 目录 ， 并 将 相应 的 JavaScript 和 CSS 文件 保存 到 其 中 。 


15.4.1 基础 知识 一 一 插入 菜单 栏 


Dreamweaver CS4 允许 用 户 插入 两 种 类 型 的 菜单 栏 : 垂直 和 水 平 ， 这 两 者 插入 方法 相同 。 
方法 是 : 单 击 “ 布 局 ”选项 卡 中 的 “Spry 菜单 栏 ”按钮 力 sezge 关 |， 然后 在 “Spry 菜单 栏 ”对 
话 框 中 通过 “水 平 ” 或 者 “垂直 ” 单 选 按钮 选择 不 同 的 布局 选项 ， 如 图 15-30 和 图 15-31 所 示 。 


EPIS | 


15-30 水平 Spry 菜单 15-31 垂直 Spry 菜单 


保存 文档 后 ， 就 可 以 预览 默认 样式 的 水 平 或 者 垂直 布局 的 菜单 栏 效 果 ， 如 图 15-32 和 
图 15-33 所 示 。 当 某 个 菜单 栏目 右 侧 出 现 小 三 角 时 ， 说 明 该 栏目 还 包括 子 菜单 。 


15-32 垂直 Spry 菜单 运行 结果 15-33 水平 Spry 菜单 运行 结果 


菜单 栏 组 件 的 HTML 中 包含 一 个 外 部 tu 标签 。 该 标签 中 对 于 每 个 顶级 菜单 项 都 包含 一 个 
I 标签 ， 而 项 级 菜单 项 (i) 又 包含 用 来 为 每 个 菜单 项 定义 子 菜单 的 ul 和 标签 。 另 外 子 菜单 中 
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同样 可 以 包含 子 菜单 。 顶 级 菜单 和 子 菜单 可 以 包含 任意 多 个 子 菜单 项 。 


15.4.2 ”基础 知识 一 一 编辑 菜单 栏 


创建 Spry 菜单 栏 组 件 后 , 单 击 Spry 菜单 栏 , 在 “属性 ”面板 中 显示 菜单 条 属性 , 如 图 15-34 
所 示 。 


属性 


了 
| 一 一 


图 15-34 Spry 菜单 栏 “ 属 性 ”面板 


其 中 ，Spry 菜单 栏 “ 属 性 ”面板 中 的 各 个 选项 及 作用 如 下 。 

@ ”菜单 栏 名 称 : 默认 菜单 栏 名 称 为 MenuBarl， 该 名 称 不 能 以 汉字 命名 ， 可 以 使 用 字母 
或 者 数字 。 

禁用 样式 : 单 击 该 按钮 ， 菜 单 栏 变 成 项 目 列表 ， 并 且 按钮 名 称 更 改 为 “启用 样式 ”。 
菜单 栏目 : 在 “属性 ”面板 中 包括 主 菜单 栏目 、 一 级 菜单 栏目 与 二 级 菜单 栏目 。 
文本 : 在 该 选项 文本 框 中 设置 栏目 名 称 。 

链接 : 该 选项 可 以 为 菜单 栏目 添加 链接 文件 ， 默 认 情 况 下 为 空 链接 。 单 击 “ 浏 览 ” 按 
钮 已 可 以 选择 链接 文件 。 

@ 目标 : 该 选项 指定 要 在 何 处 打开 所 链接 的 页 面 。 

@ 。 标题: 该 选项 为 菜单 栏目 提示 文本 。 


1. 调整 菜单 栏目 


选中 Spry 菜单 栏 ， “属性 ”面板 中 显示 的 是 默认 菜单 栏目 ， 并 且 选 中 的 是 主 菜单 第 一 个 
栏目 名 称 。 在 主 菜单 栏目 区 域 中 单 击 向 下 箭头 一 次 ， 可 以 将 该 栏目 与 第 二 个 栏目 交换 位 置 ， 而 
相应 的 子 菜单 栏目 也 会 随 之 变 位 ， 如 图 15-35 所 示 。 


加 0- a- 
Er RELI 


15-35 更改 菜单 项 的 顺序 


R73 


'* 开发 学 习 实录 - 必 


参 = 》” 在 一 级 菜单 栏目 与 二 级 菜单 栏目 中 同样 可 以 更 改 菜 单项 顺序 ， 并 且 相 应 的 子 菜单 

名 万 | 随 之 变 位 。 

在 默认 情况 下 ， 主 菜单 包括 4 个 栏目 。 选 中 其 中 一 个 菜单 栏目 名 称 ， 单 击 “ 添 加 菜单 项 ” 
按钮 起， 在 其 下 方 添加 “无 标题 项 目 ” 的 菜单 栏目 ， 如 图 15-36 所 示 。 


15-36 ”添加 主 菜单 项 目 


\ 
外 | 派 加 的 菜单 栏目 没有 于 菜单 ， 需 要 在 于 菜单 选项 中 使 用 相同 方法 添加 。 

如 果 要 删除 基 个 主 菜单 栏目 ， 只 要 选中 该 栏目 名 称 ， 单 击 “ 副 除 菜单 项 ” 按钮 二 即 可 。 同 
时 ， 其 相应 的 子 菜单 也 被 而 除 ， 如 图 15-37 所 示 。 


到 和 人 要 入 中 负 间 此 区 人 全 了 0 站 WD 


图 15-37 ”删除 主 菜单 栏目 


在 文档 中 只 看 到 主 菜单 栏目 , 无 法 查看 其 相应 的 子 菜 单 栏目 。 要 想 查 看 子 菜单 栏目 有 两 种 
方法 ,一 种 是 在 “属性 ”面板 中 单 击 子 菜单 栏目 名 称 ， 文 档 中 即 可 显示 子 菜单 ; 还 有 一 种 方法 
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是 单 击 “ 属 性 ”面板 中 的 “禁用 样式 ”按钮 ， 文 档 中 的 菜单 就 会 以 项 目 列表 的 形式 将 所 有 菜单 
栏目 展示 出 来 ， 如 图 15-38 所 示 。 


GDCEIRTI 


15-38 ”查看 子 菜单 栏目 


2. 设置 菜单 栏目 基本 属性 

插入 的 Spry 菜单 栏 已 经 具备 了 所 有 功能 ， 比 如 菜单 栏目 名 称 与 超级 链接 ， 只 需要 将 这 些 
功能 根据 所 在 的 网 页 内 容 有 具体 化 。 方 法 是 在 “属性 ”面板 中 选中 要 更 改 的 栏目 名 称 ， 然 后 设置 
“文本 ”与 “链接 ”选项 即 可 ， 如 图 15-39 所 示 。 


EE" 
要 在。 靶 入 0U 谷 浴 员 阁 式 四 ) 二 让) 站 点 号 ) 直人 D。 再 肝 0 


有 本 生生 


15-39 更改 栏 目 名 称 与 链接 


人 ” 即使 具有 子 菜单 的 菜单 栏目 也 可 以 设置 超级 链接 ， 这 样 既 可 以 通过 该 菜单 栏目 显 
渤 熏 | 示 相 应 的 子 菜单 ， 也 可 以 单 去 该 菜单 栏目 跳 转 到 其 他 网 页 。 


“属性 ”面板 中 的 “标题 ”用 来 设置 鼠标 指向 菜单 栏目 时 的 提示 文字 ， 如 图 15-40 所 示 。 
“目标 ”选项 用 来 设置 链接 文件 的 打开 方式 。 后 者 在 没有 设置 的 情况 下 ， 链 接 文件 会 在 同一 窗 


< 


口中 打开 。 


图 15-40 显示 提示 信息 


3. 定位 子 菜单 

当 创 建 好 Spry 菜单 栏 后， 保存 文档 并 且 按 F12 键 打开 正 窗口 预览 ， 发 现 子 菜单 栏目 与 上 
级 菜单 栏目 之 间 的 上 、 下 、 左 、 右 位 置 是 固定 的 ,在 “CSS 样式 ”面板 中 ,选中 ul.MenuBarHorizontal 
ul 规则 ， 单 击 “ 编 辑 样式 ”按钮 过 。 在 “ 方 框 ”选项 卡 中 ， 通 过 设置 “边界 ”选项 中 的 参数 来 
改变 子 菜单 栏目 与 上 级 菜单 栏目 之 间 的 位 置 。 

4. 更 改 菜单 项 的 尺 十 


在 “CSS 样式 ”面板 中 双击 ul.MenuBarHorizontal li 规则 , 在 “定位 ”选项 卡 中 , 设置 Width 
参数 改变 主 菜单 栏目 宽度 ;双击 ul.MenuBarHorizontal ul 1i 规则 可 以 改变 子 菜单 栏目 宽度 。 
5. 更 改 菜单 项 的 背景 颜色 与 文本 样式 
Spry 菜单 栏 中 背景 颜色 与 文本 样式 的 状态 是 同步 的 ， 所 以 两 者 使 用 的 CSS 规则 是 相同 的 ， 
只 需 设 置 不 同 的 选项 卡 即 可 。 
1) 默认 状态 
在 默认 情况 下 ， 菜 单 栏目 背景 颜色 为 浅 灰 色 ， 而 文本 颜色 为 深 灰 色 。 在 “CSS 样式 ”面板 
中 双击 ul.MenuBarHorizontal a 规则 ， 可 以 更 改 菜单 栏目 中 的 字体 和 背景 颜色 。 
Sm， 在 “类 型 ”选项 卡 中 只 是 设置 了 “字体 ”参数 ， 其 他 参数 没有 和 更改。 当然 也 可 以 
名 本 | 。 在 其 中 设置 更 多 的 效果 . 
2) 鼠标 指向 栏目 状态 
双击 “CSS 样式 ”面板 中 的 uLMenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus 规 
则 ， 可 改变 鼠标 指向 菜单 栏目 时 的 状态 显示 ， 例 如 修改 为 加 粗 并 加 下 划 线 显示 。 
3) 上 级 菜单 栏目 状态 
当 鼠 标 指向 子 菜单 栏目 后 , 相应 的 上 级 菜单 栏目 会 呈现 一 个 显示 状态 , 说 明子 菜单 是 在 该 菜 
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单 中 打开 的 。 这 种 显示 状态 可 以 通过 ul MenuBarHorizontal a MenuBarftemHover ul.MenuBarHorizontal 
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a MenuBarSubmenuVisible 规则 设置 。 
6 Spry 组 件 的 CSS 文件 是 自动 保存 在 站 点 的 SpryAssets 文件 夹 中 的 ， 要 想 设 置 不 同 
提示 样式 的 Spry 组 件 ， 必 须 在 不 同 的 站 点 中 创建 Spry 组 件 。 


15.4.3 ”实例 描述 


导航 对 于 成 熟 的 网 站 来 说 ， 是 一 个 必 不 可 少 的 功能 模块 。 本 实例 通过 使 用 Spry 框架 中 的 
菜单 栏 组 件 来 完成 网 站 导航 的 功能 。 该 菜单 栏 有 水 平 排列 和 垂直 排列 两 种 方式 ， 本 实例 使 用 水 
平方 式 显示 菜单 效果 。 


15.4.4 ”实例 应 用 


【 例 15-4】 首 页 导航 

使 用 Dreamweaver CS4 插入 Spry 框架 中 的 水 平 菜单 ， 方 法 是 : 单 击 “ 布 局 ”选项 卡 中 的 
“Spry 菜单 栏 ”按钮 图 sezgssj， 然 后 在 “Spry 菜单 栏 ” 对 话 框 中 通过 “水 平 ” 单 选 按 钮 来 选 
择 布局 选项 。 菜单 栏 布局 效果 如 图 15-41 所 示 。 


15-41 选择 水 平 插入 菜单 
创建 Spry 菜单 栏 组 件 后 , 单 击 Spry 菜单 栏 , 在 “属性 ”面板 中 显示 菜单 条 属性 , 如 图 15-42 


所 示 。 


属性 


本 文 二 RS 卫 | 
本 站 | 右 大 隔 | 人 站 
自 证 此 构件 | 请 | 个 人 中 心 | 
EF 


15-42 ”Spry 菜单 栏 的 “属性 ”面板 


< 


全 开发 学 习 实录 - 尾 


可 以 对 导航 的 文本 进行 修改 、 添 加 和 删除 等 功能 操作 。 通 过 “链接 ”属性 可 以 设置 选择 该 
菜单 后 的 转向 页 


15.4.5 ”运行 结果 


在 浏览 器 中 运行 default.html 页 面 ， 效 果 如 图 15-43 所 示 。 


图 15-43 首页 导航 


15.4.6 ”实例 分 析 


Sammi 


通过 以 上 实例 ， 可 以 发 现 使 用 Spry 框架 实现 菜单 效果 非常 方便 ， 只 需要 将 该 空间 拖 动 到 
页 面 ， 然 后 设置 相关 的 属性 即 可 。 在 使 用 该 控件 时 ， 每 个 选项 都 可 以 设置 对 应 的 链接 地 址 。 


15.5 制作 导航 简介 


选项 卡 式 面板 组 件 是 一 组 面板 ， 用 来 将 内 容 存储 到 紧凑 的 空间 中 。 访 问 者 可 以 通过 单 击 要 
访问 的 面板 上 的 选项 卡 ， 来 隐藏 或 者 显示 在 选项 卡 式 面板 中 的 内 容 。 当 访问 者 单 击 不 同 的 选项 
卡 时 ， 组 件 的 面板 会 相应 地 打开 。 


上 视频 教学 : 光盘 /视频 /15/15.5 制作 导航 简介 .avi 人 长度: 5 分 名 


15.5.1 基础 知识 一 一 插入 选项 卡 


要 在 页 面 中 插入 选项 卡 式 面板 ,首先 要 保存 当前 页 面 。 然 后， 从 “插入 ”工具 栏 的 “ 布 


可 


m7 >> 
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选项 卡 中 单 击 “Spry 选项 卡 面板 ”按钮 加 sri 五 |， 此 时 在 光标 所 在 位 置 即 可 创建 Spry 选 
项 卡 面板 ， 如 图 15-44 所 示 。 


15-44 创建 Spry 选项 卡 面板 


如 图 15-41 所 示 ， 默 认 的 Spry 选项 卡 面板 组 件 带 有 两 个 选项 卡 。 选 项 卡 式 组 件 的 HTML 
代码 中 包含 一 个 含有 所 有 面板 的 外 部 div 标签 、 一 个 标签 列表 、 一 个 用 来 包含 内 容 面 板 的 div 
以 及 各 面板 对 应 的 div。 选 项 卡 式 面板 组 件 的 HTML 中 ， 在 文档 头 和 选项 卡 面板 组 件 的 HTML 
标记 之 后 还 包括 脚本 标签 。 


15.5.2 ”基础 知识 一 一 编辑 选项 卡 


插入 选项 卡 式 面板 完成 后 ， 默 认 第 一 个 面板 Tabl 处 于 打开 状态 ， 在 “属性 ”面板 中 会 显 
示 相 应 的 选项 ， 如 图 15-45 所 示 。 


属性 
加 这 于 一 三 十 一 二 ~ 以 人 Er 可 
ai 


医 加 


图 15-45 ”Spry 选项 卡 面板 的 “属性 ”面板 
1. 设置 选项 卡 面板 基本 属性 


要 想 打 开 其 他 选项 卡 面板 ， 首 先 将 光标 指向 该 选项 卡 ， 然 后 单 击 图 图 标 即 可 打开 该 面板 。 
当然 也 可 以 在 “属性 ”面板 中 单 击 选项 卡 的 名 称 来 打开 该 面板 。 
接着 选中 文本 ， 在 面板 中 通过 输入 文本 ， 或 者 插入 图 像 来 更 改 其 内 容 。 


2. 调整 选项 卡 面板 


创建 的 Spry 选项 卡 面板 包括 两 个 选项 卡 ， 选 中 选项 卡 面板 后 ， 在 “属性 ”面板 中 选中 其 
中 一 个 选项 ， 再 单 击 “ 添 加 面板 ”按钮 地， 即 可 在 该 名 称 下 方 添加 一 个 面板 。 
如 果 发 现 选项 卡 位 置 不 正确 ， 可 以 通过 向 下 未 或 者 向 上 六 按钮 移动 选项 卡 的 位 置 ， 使 Spry 


< 


选项 卡 面板 布局 更 加 合理 。 
和 默认 情况 下 ， 选 项 卡 式 面板 组 件 会 展开 以 填充 可 用 空间 。 但 是 ， 用 户 可 以 通过 设 
5 | 置 折 苔 式 容器 width 属性 来 限制 选项 卡 式 面板 组 件 的 宽度 。 方 法 是 在 
SpryTabbedPanels.css 文件 中 修改 .TabbedPanels 规则 ， 该 规则 可 为 选项 卡 式 面板 组 
件 的 主 容器 元 素 定义 属性 ， 添 加 一 个 width 属性 即 可 ， 例 如 “width:300px”。 


15.5.3 ”实例 描述 
继续 完成 15.4 节 中 的 实例 ,本 实例 在 原 有 实例 的 基础 上 新 增加 一 个 导航 简介 功能 。 所 谓 的 


导航 简介 功能 就 是 使 用 选项 卡 来 实现 的 界面 切换 。 该 功能 可 以 大 大 减少 内 容 在 页 面 中 的 占有 
量 ， 同 时 还 可 以 方便 用 户 的 操作 。 本 实例 中 的 导航 简介 就 是 使 用 选项 卡 控件 来 完成 的 。 


15.5.4 ”实例 应 用 


【 例 15-5】 导 航 简 介 
首先 要 保存 当前 页 面 。 然 后 ， 从 “插入 ”工具 栏 的 “布局 ”选项 卡 中 单 击 “Spry 选项 卡 式 


| -= 
CT 


15-46 ”插入 选项 卡 面板 


接 下 来 添加 选项 卡 。 在 Spry 面板 中 设置 “关于 学 院 ”、“ 学 习 交流 ”、“ 学 院 论坛 ”和 
“娱乐 家 园 ” 等 选项 卡 ， 在 对 应 的 选项 卡 中 设置 需要 显示 的 导航 简介 信息 ， 如 图 15-47 所 示 。 


Hs | 


15-47 ”需要 显示 的 导航 简介 信息 
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设置 好 相应 的 选项 信息 ， 保 存 页 面 则 会 在 页 面 中 生成 如 下 代码 。 


<div id="TabbedPanelsl" class="TabbedPanels"> 
<ul class="TabbedPanelsTabGroup"> 
<li class="TabbedPanelsTab™ tabindex="0"> 关 于 学 院 </1i> 
<li class="TabbedPanelsTab"”tabindex="0"> 学 习 交流 </1i> 
<1li class="TabbedPanelsTab"” tabindex="0"> 学 院 论坛 </1i> 
<1i class="TabbedPanelsTab"” tabindex="0"> 娱 乐 家 园 </1i> 
</ul> 
<div class="TabbedPanelsContentGroup"> 
<div class="TabbedPanelsContent"> 关 于 学 院 导 航 简介 内 容 </div> 
<div class="TabbedPanelsContent"> 学 习 交流 导航 简介 内 容 </div> 
<div class="TabbedPanelsContent"> 学 院 论坛 导航 简介 内 容 </div> 
<div class="TabbedPanelsContent"> 娱 乐 家园 导 航 简 介 内 容 </div> 
</div> 
</div> 


15.5.5 ”运行 结果 


保存 设置 好 的 相关 信息 后 ， 在 浏览 器 中 运行 default.html 页 面 ， 效 果 如 图 15-48 所 示 。 


有 要 与 梦想 的 集合 
中 过 bd 


由 由 风 与 企 闪 总、 


从 内 公告 


PHP 入 门 划 宙 本 得 


2 vem Cement 
SQL Server 2008U 和 TEI 


可 map A rsszmm 


图 15-48 首页 导航 简介 运行 结果 


15.5.6 ”实例 分 析 


点 源码 解析 : 


在 这 个 实例 中 ,使 用 了 选项 卡 控件 完成 网 站 导航 简介 功能 。 从 该 控件 生成 的 代码 中 可 以 看 
到 ， 它 是 以 列表 形式 显示 的 ， 每 个 选项 按钮 都 是 li 列表， 而 显示 的 面板 信息 则 是 使 用 div 容 
器 。 这 样 方便 开发 人 员 对 该 空间 的 灵活 操作 。 


< 全 ——— 


[< 开发 学 习 实录 …# 


15.6 窗 内 公告 


本 实例 将 使 用 Dreamweaver CS4 中 的 Spry 折合 组 件 来 实现 。Spry 是 一 个 可 折 且 面板 ， 可 
以 将 大 量 内 容 存储 在 一 个 紧凑 的 空间 中 。 访问 者 可 以 通过 单 击 该 面板 上 的 选项 卡 来 隐藏 或 者 显 
示 折 车 组 件 中 的 内 容 。 折 对 面 板 分 为 两 种 : 一 种 是 多 个 面板 的 折合 式 面板 组 件 ， 一 种 是 只 有 一 
个 面板 的 可 折 车 面板 组 件 。 


9 
BE 视频 教学 :光盘 /视频 /15/15.6 窗 内 公告 .avi @ 攻 度 : 5 分 名 


15.6.1 基础 知识 一 一 插入 折叠 式 面板 


Spry 折 营 式 组 件 是 一 组 可 折 倒 的 面板 ， 单 击 不 同 的 选项 卡 时 ， 折 芭 组 件 的 面板 会 相应 地 
展开 或 者 收缩 。 在 折合 组 件 中 ， 每 次 只 能 有 一 个 内 容 面 板 处 于 打开 且 可 见 的 状态 。 

要 创建 Spry 折 釉 式 组 件 ， 只 要 单 击 “ 布 局 ”选项 卡 中 的 “Spry 折 和 式 ”按钮 贺 so2 拒 | 即 
可 ， 如 图 15-49 所 示 。 


By mW 0. A | 。 一口 x 


15-49 创建 Spry 折 又 式 组 件 


Spry 折合 式 组 件 的 编辑 方法 与 Spry 选项 卡 面板 基本 相同 ， 只 是 前 者 只 能 添加 或 者 删除 面 
板 ， 以 及 调整 面板 顺序 ， 不 能 更 改 预览 中 默认 打开 的 面板 ， 如 图 15-50 所 示 。 在 预览 中 发 现 ， 
面板 高 度 不 会 随 着 面板 中 的 内 容 变 化 。 

折合 式 组 件 的 默认 HTML 中 包括 所 有 面板 的 外 部 div 标签 以 及 各 面板 对 应 的 div 标签 。 各 
面板 的 标签 中 还 有 一 个 标题 div 和 内 容 div。 折 闭 式 组 件 可 以 包含 任意 数量 的 独立 面板 。 在 折 倒 
式 组 件 的 HIML 中 还 包括 script 标签 。 

下 面 介 绍 Spry 可 折合 面板 组 件 的 插入 方法 。Spry 可 折合 面板 组 件 可 以 将 内 容 存储 到 紧凑 
的 空间 中 ， 单 击 组 件 的 选项 卡 即 可 隐藏 或 者 显示 可 折合 面板 中 的 内 容 。 
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图 15-50 预览 Spry 折 和 又 式 面板 


方法 是 : 单 击 “ 布 局 ”选项 卡 中 的 “Spry 可 折 营 面板 ”按钮 忆 em ， 创 建 Spry 可 折 
受 面 板 ， 其 中 “属性 ”面板 显示 如 图 15-51 所 示 。 


| -0 
立体 0 负 四 查看 轴 新 入 0D) 能 小 仙 。 交 区 (0 兮 分 (C0) 站 吉 (DD 证 口 D 革 助人 0 


15-51 创建 Spry 可 折叠 面 板 
Spry 可 折合 面板 虽然 只 有 一 个 面板 ,在 文档 中 还 是 可 以 显示 或 者 隐藏 面板 内 容 。 方法 是 将 
鼠标 指向 该 面板 的 选项 卡 ， 然 后 单 击 “ 眼 睛 ”图 标 即 可 。 或 者 直接 在 “属性 ”面板 中 , 选择 “ 显 
示 ” 下 拉 列 表 中 的 “打开 ”或 者 “已 关闭 ”选项 ， 如 图 15-52 所 示 。 
展 性 


可 折 委 面板 打开 演 
9 


E3421:3 


[co] 


15-52 ”在 文档 中 显示 或 者 隐藏 面板 内 容 


<@—— 


在 “属性 ”面板 中 ， 还 可 以 设置 预览 网 页 时 的 默认 状态 。 选 择 “ 默 认 状态 ”下 拉 列 表 中 的 
“打开 ”或 者 “已 关闭 ”选项 , 即 可 在 打开 的 网 页 中 查看 打开 或 者 已 经 关闭 的 面板 效果 。 图 15-53 
所 示 为 默认 状态 为 已 关闭 的 Spry 可 折 芸 面板 。 


图 15-53 预览 Spry 可 折价 面 板 


人 》 Spry 可 折 苔 面板 在 打开 或 者 关闭 面板 时 具有 动画 效果 ， 这 是 因为 在 “属性 ”面板 
弘 瑟 | 中 启用 了 “启用 动画 ”选项 。 如 果 禁 用 了 该 选项 ,， 则 可 折 司 面板 会 迅速 打开 和 关闭 。 


15.6.2 ”基础 知识 一 一 自 定义 折 又 面板 


在 3 种 Spry 组 件 中 ，Spry 选项 卡 式 面板 、Spry 折 登 式 与 Spry 可 折 车 面板 虽然 展示 效果 不 
同 ， 但 是 组 件 样式 基本 相同 ， 例 如 面板 的 宽度 、 背 景 颜色 以 及 内 部 的 文本 样式 等 。 下 面 以 Spry 
折 和 登 式 组 件 为 例 介 绍 如 何 更 改组 件 样式 。 


| 1. 限制 面板 宽度 


默认 情况 下 ， 折 全 组件 会 展开 以 填充 可 用 空间 。 当 正 窗口 的 宽度 发 生变 化 时 ， 折 有 登 组 件 
的 宽度 会 随 之 变化 。 要 想 改变 折 欠 组 件 的 宽度 有 两 种 方法 ， 一 种 是 将 折合 组 件 建 立 在 固定 表格 
中 ， 通 过 表格 的 宽度 限制 折 欠 组 件 的 宽度 ， 另 一 种 是 真正 地 限制 其 宽度 ， 即 通过 设置 折 僵 式 容 
器 的 width 属性 来 限制 折 县 组 件 的 宽度 。 

修改 方法 是 : 选中 Spry 折合 组 件 后 , 在 “CSS 样式 ”面板 中 选中 元 素 的 “.Accordion”CSS 
规则 。 然 后 单 击 “ 编 辑 样式 ”按钮 县 ， 打开 “.Accordion 的 CSS 规则 定义 ”对 话 框 ， 在 “定义 ” 
选项 中 设置 “ 宽 ” 参 数 即 可 。 


=? 在 “CSS 样式 ”面板 中 的 “全 部 ”选项 卡 中 双击 Accordion 规则 ， 也 可 以 打开 相 
技巧 同 的 对 话 框 设置 折合 组 件 宽度 。 


设置 新 的 宽度 值 后 ， 保 存 SpryAccordion.css 文件 并 且 返 回 折 和 县 组 件 所 在 文档 。 再 到 正 窗 
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口中 预览 ， 发 现 无 论 正 窗口 的 宽度 如 何 变 化 ， 折 合 面 板 的 宽度 都 不 会 发 生变 化 。 


3 当 设置 CSS 规则 并 且 关 闭 对 话 框 后 ， 会 弹出 SpryAccordion.css 文件 。 必 须 保存 该 
提示 文件 后 才能 在 IE 窗口 中 查看 更 改 后 的 效果 。 


2. 更 改 折 又 组 件 的 背景 颜色 
在 预览 Spry 折合 式 面板 时 ， 发 现 该 面板 具有 不 同 状 态 中 的 不 同 背 景 颜 色 。 要 更 改 不 同 部 
分 的 背景 颜色 ， 可 以 使 用 表 15-2 所 提供 的 参数 进行 设置 。 
表 15-2 Spry 折叠 式 组 件 中 的 背景 颜色 CSS 规则 


要 更 改 的 组 件 部 分 相关 CSS 规则 要 添加 或 更 改 的 属性 和 值 的 实例 


折 登 式 面板 选项 Pe background-color: #CCCCCC:( 默 认 
卡 的 背景 颜色 值 ) 

折 麦 式 内 容 面板 Bcd background-color: #CCCCCC; ( 默 
的 背景 颜色 认 值 ) 


已 打开 的 折 登 式 


在 折 登 式 组 件 中 ， 还 包括 鼠标 响应 背景 颜色 事件 。 单 击 某 个 选项 卡 后 ， 该 选项 卡 面板 处 于 
打开 状态 并 且 其 背景 颜色 为 湖 蓝 色 (#33CCFF); 而 其 他 选项 卡 背景 颜色 为 蓝 色 (#3399FF)。 这 两 


个 背景 颜色 分 别 在 .AccordionFocused .AccordionPanelOpen .AccordionPanelTab 
与 .AccordionFocused .AccordionPanelTab 规则 中 设置 。 


3. 设置 折叠 组 件 文本 的 样式 
Spry 折合 式 组 件 中 的 文本 分 为 选项 卡 文本 与 面板 中 的 文本 , 所 以 在 设置 文本 样式 时 ， 除 了 
这 两 种 文本 样式 可 以 分 别 设置 外 ， 还 可 以 总 体 设置 整个 组 件 中 的 文本 。 表 15-3 列 出 了 不 同 部 
分 的 文本 所 在 的 CSS 规则 。 
表 15-3 不 同 部 分 的 文本 相关 CSS 规则 


background-color: #EEEEEE: 
(默认 值 ) 


要 更 改 的 文本 相关 CSS 规则 要 添加 的 属性 和 值 的 实例 

整个 折 县 组 件 (包括 选项 卡 和 内 容 erdlian Hl Mehailntaned ee 
.Accordion 或 .Accordiol e : Arial: -size: 
面板 ) 中 的 文本 ont: al: font-size:medium: 


仅 限 折 肢 式 面板 选项 卡 中 的 文本 .AccordionPanelTab font: Arial: font-size:medium: 
仅 限 折 倒 式 内 容 面板 中 的 文本 .AccordionPanelContent font: Arial: font-size:medium: 


Spry 选项 卡 式 面板 、Spry 可 折 司 面板 、Spry 折 有 司 式 的 设置 基本 相同 ， 只 是 由 于 不 
注意 同 的 组 件 ， 其 名 称 各 不 相同 。Spry 选项 卡 式 面板 名 称 为 TabbedPanels; Spry 可 折 
晤 面板 名 称 为 CollapsiblePanel。 


< 


[< 开发 学 习 实录 在 


15.6.3 ”实例 描述 


我 们 将 以 “ 窗 内 网 公告 ”模块 为 例 ， 向 大 家 介绍 使 用 Spry 中 的 折合 组 件 来 开发 Web 功能 
的 方法 。 该 实例 主要 的 功能 是 向 用 户 展示 站 内 公告 信息 或 者 站 内 的 当前 状态 信息 ， 这 样 可 以 方 
便 用 户 直观 地 了 解 该 站 的 当前 内 容 。 


15.6.4 ”实例 应 用 


【 例 15-6】 窗 内 公告 
创建 Spry 折 芝 式 组 件 。 单 击 “ 布 局 ”选项 卡 中 的 “Spry 折 营 式 ” 按 钮 昌 sez 拷 添加 折 营 
式 组 件 ， 详 细 如 图 15-54 所 示 。 


| 四 so- a- | Wm- 一 = 
| TE 


15-54 ”添加 折 又 组 件 
该 组 件 的 编辑 方法 与 Spry 选项 卡 面板 基本 相同 , 接 下 来 设置 该 组 件 的 属性 信息 , 如 图 15-55 


所 示 。 


图 15-55 折 又 组 件 属性 设置 
配置 好 相关 的 折 和 县 组 件 的 属性 后 则 需要 对 折合 面板 添加 内 容 ， 最 后 生成 代码 如 下 : 


<div id="Accordionl" class="Accordion" tabindex="0"> 


<div class="AccordionPanel"> 
<div class="AccordionPanelTab"> 窗 内 公告 </div> 
<div class="AccordionPanelContent"> 
网 络 安全 视频 教程 Oracle 1<br/> 
1g 完全 学 习 手册 视频 教程 Windows XP<br/> 
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视频 教程 Dreamweaver <br/> 
视频 教程 Flash 视频 教程 Word 2007</div> 
</div> 
<div class="AccordionPanel"> 
<div class="AccordionPanelTab"> 窗 内 动 网 </div> 
<div class="AccordionPanelContent"><UL> 
<script src="http://bbs.itzcn.com/api/javascript.php?key=threads_ school _ 
index right" type="text/javascript"></script></UL></div> 
</div> 
</div> 


15.6.5 ”运行 结果 


保存 相关 属性 和 代码 后 ， 在 浏览 器 中 运行 default.html 页 面 ， 效 果 如 图 15-56 所 示 。 


各 入 看 袜 入 装 各， 扳 检 学 刀 计 算 机 结 木 | -宇内 网 ” 说 和 关 笠 -pindory Internet Ernlorcr 全 | 隔 | 攻 | 


)” [Aiss Uso8 stedt Ml 
襄 各 这 类。 汪 旬 下 如 各 必定 污 1 -本 内 
9 


费 看 视频 教程 ， 轻 松 学 编 
TF . et 


pa 
人 各 过 办 ， 打 这 一 个 各 开 20 


图 15-56 首页 右 侧 模块 运行 效果 


15.6.6 ”实例 分 析 


6 源码 解析 : 


在 这 个 实例 中 使 用 了 Spry 组 件 中 的 折 司 式 组 件 ， 大 大 地 方便 了 开发 人 员 的 操作 ， 以 前 在 
做 一 个 折 熙 特效 时 ,需要 花费 一 定 的 时 间 , 而 现在 使 用 折 滞 效果 组 件 只 需 将 组 件 拖 惫 到 页 面 上 ， 
写 入 需要 显示 的 内 容 即 可 。 


15.7 用 户 注 册 


Dreamweaver CS4 中 内 置 的 Spry 框架 提供 了 丰富 用 户 交 互 功能 的 组 件 。 这 些 组 件 可 以 让 用 
户 显示 /隐藏 页 面 元 素 、 改 变 呈 现 方式 以 及 菜单 交互 等 。 其 中 的 Spry 表单 组 件 主要 用 于 验证 用 
户 在 对 象 域 中 所 输入 的 内 容 ， 是 否 为 有 效 的 数据 。 并 且 在 这 些 对 象 域 中 ， 内 建 了 CSS 样式 和 


< 人 mm 


JavaScript 特效 ， 更 加 丰富 了 对 象 域 的 显示 效果 。 
ca 视频 教学 : 光盘 /视频 /15/15.7 用 户 注 册 .avi 人 @@ 长 度 : 7 分 钟 


15.7.1 实例 描述 


本 实例 使 用 Dreamweaver CS4 内 置 的 Spry 框架 提供 的 组 件 来 完成 用 户 注册 功能 。 该 注册 
功能 包含 用 户 名 、 用 户 密码 、 密 码 确认 、 性 别 和 出 生地 等 功能 。 我 们 将 使 用 Spry 框架 来 实现 
用 户 名 空 值 验证 、 密 码 框 密码 强度 和 确认 密码 验证 等 功能 。 


15.7.2 ”实例 应 用 


【 例 15-7】 用 户 注 册 

Spry 验证 文本 域 组 件 是 一 个 文本 域 ， 该 域 用 于 在 用 户 输入 文本 时 显示 文本 的 状态 (有 效 或 
无 效 )。 例 如 ， 可 以 在 用 户 输入 电子 邮件 地 址 的 表单 中 添加 验证 文本 域 组 件 。 如 果 访 问 者 无 法 
在 电子 邮件 地 址 中 输入 “@” 符 号 和 句点 ， 验 证 文本 域 组 件 会 返回 一 条 消息 ， 声 明 用 户 输入 的 
信息 无 效 。 

1. 插入 Spry 验证 文本 域 


首先 在 页 面 上 单 击 鼠标 左 键 ， 再 从 “插入 ”工具 栏 中 的 “表单 ”面板 上 单 击 “Spry 验证 文 
本 域 ” 按 钮 四 sees |， 打 开 “ 输 入 标签 辅助 功能 属性 ”对 话 框 。 在 “标签 ”文本 框 中 输入 “您 
的 用 户 名 ”文字 ， 然 后 单 击 “ 确 定 ” 按 钮 在 页 面 上 插入 该 对 象 域 ， 如 图 15-57 所 示 。 


Be 9. A 而 便 。 二 三 六 
文件 0) 机 晤 ( 玉 亚 看 们 斤 入 名 修 加 人 着 实 们 生生 (0 项 有 人 国 口 人 者 动 加 


15-57 ”插入 验证 文本 域 


验证 文本 域 组 件 具 有 许多 状态 (例如 ， 有 效 、 无 效 和 必须 值 等 )。 用 户 可 以 根据 所 需 的 验证 
结果 ， 使 用 “属性 ”面板 来 修改 这 些 状态 的 属性 ， 如 图 15-58 所 示 。 


sé >> 
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图 15-58 文本 域 的 “属性 ”面板 


在 “属性 ”面板 中 有 很 多 选项 可 以 设置 验证 文本 域 的 属性 ， 在 表 15-4 中 列 出 了 它们 的 名 
称 及 功能 。 
表 15-4 Spry 文 本 域 的 属性 参数 
名 称 功 能 
Spry 文本 域 标识 文本 域 的 名 称 。 该 名 称 也 是 文本 域 的 ID 号 
类 型 确定 该 文本 域 需要 验证 的 类 型 
初始 状态 _| 在 浏览 器 中 加 载 页 面 或 者 用 户 重 置 表单 时 组 件 的 状态 
必需 状态 _| 当 用 户 在 文本 域 中 没有 输入 必需 文本 时 组 件 的 状态 
有 效 状 态 ”| 当 用 户 正确 地 输入 信息 且 表 单 可 以 提交 时 组 件 的 状态 
焦点 状态 | 当 用 户 在 组 件 中 放置 插入 点 时 组 件 的 状态 
无 效 状态 ”| 当 用 户 所 输入 文本 的 格式 无 效 时 组 件 的 状态 。 例 如 , 用 09 而 不 是 用 2009 表示 年 份 
可 以 设置 验证 发 生 的 时 间 ( 包 括 用 户 在 组 件 外 部 单 击 时 、 输 入 内 容 时 或 尝试 提交 表 
验证 单 时 )。 该 项 为 “模糊 ”状态 ， 即 当 用 户 在 文本 域 的 外 部 单 击 时 验证 
等 onChange | 该 项 为 “更 改 ” 状 态 ， 即 当 用 户 更 改 文本 域 中 的 文本 时 验证 
onSubmit | 该 项 为 “提交 ”状态 ， 即 当 用 户 尝试 提交 表单 时 验证 


最 小 字符 数 状态 
最 大 字符 数 状态 


最 小 值 状态 


最 大 值 状态 
强制 模式 


当 用 户 输入 的 字符 数 少 于 文本 域 所 要 求 的 最 小 字符 数 时 组 件 的 状态 

当 用 户 输入 的 字符 数 多 于 文本 域 所 允许 的 最 大 字符 数 时 组 件 的 状态 

当 用 户 输入 的 值 小 于 文本 域 所 需 的 值 时 组 件 的 状态 。 适 用 于 整数 、 实数 和 数据 类 型 
验证 

当 用 户 输入 的 值 大 于 文本 域 所 允许 的 最 大 值 时 组 件 的 状态 。 适用 于 整数 、 实 数 和 数 
据 类 型 验证 

用 户 可 以 禁止 在 验证 文本 域 组 件 中 输入 无 效 字符 


每 当 验 证 文本 域 组 件 以 用 户 交互 方式 进入 其 中 一 种 状态 时 ，Spry 框架 逻辑 会 向 该 组 件 的 
HTML 容器 添加 特定 的 CSS 类 。 例 如 ， 如 果 用 户 尝试 提交 表单 ， 但 尚未 在 必 填 文本 域 中 输入 
文本 ，Spry 会 向 该 组 件 应 用 一 个 类 ， 使 它 显示 “需要 提供 一 个 值 ”错误 消息 。 

在 设置 过 程 中 ， 用 户 可 以 为 验证 文本 域 组 件 指定 不 同 的 验证 类 型 。 例 如 ， 如 果 文 本 域 将 接 
收 信用 卡号 ， 则 可 以 指定 信用 卡 验证 类 型 。 并 且 大 多 数 验 证 类 型 都 会 使 文本 域 要 求 采 用 标准 格 
式 ， 通 过 表 15-5 来 详细 了 解 一 下 文本 域 的 格式 种 类 。 


表 15-5 文本 域 的 验证 类 型 


验证 类 型 格 式 
| 无 需 特殊 格式 
整数 文本 域 仅 接受 数字 


<@——— 
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续 表 
验证 类 型 格 式 
文本 域 接受 包含 @ 和 句点 (.) 的 电子 邮件 地 址 ， 而 且 @ 和 句点 的 前 面 和 后 面 都 至 少 有 
电子 邮件 a 
个 字母 
日 期 格式 可 变 。 可 以 从 “属性 ”面板 的 “格式 ”下 拉 列 表 中 选择 
格式 可 变 。 可 以 从 “属性 ”面板 的 “格式 ”下 拉 列 表 中 选择 。tt 表示 am/pm 格式 ， 
时 间 下 
t 表 示 ap 格式 
用 卡 格式 可 变 。 可 以 选择 接受 所 有 信用 卡 , 或 者 指定 特定 种 类 的 信用 卡 (MasterCard、 Visa 
等 )。 文 本 域 不 接受 包含 空格 的 信用 卡号 
邮政 编码 格式 可 变 。 从 “属性 ”面板 的 “格式 ”下 拉 列 表 中 选择 
电话 号 码 文本 域 接受 美国 和 加 拿 大 格式 ， 即 (000)000-0000 或 自 定义 格式 的 电话 号 码 。 如 果 
选择 自 定义 格式 ， 请 在 “模式 ”文本 框 中 输入 格式 ， 例 如 ，000.00(00) 
社会 安全 号 码 文本 域 接受 000-00-0000 格式 的 社会 安全 号 码 
货币 文本 域 接受 1.000.000.00 或 者 1.000.000.00 格式 的 货币 
pe 验证 各 种 数字 : 数字 (例如 1)、 浮 点 值 (例如 ，12.123)、 以 科学 记 数 法 表示 的 浮 点 值 。 
RN 例如 ，1.212e+12、1.221e-12， 其 中 e 用 作 10 的 军 
全 地 址 格式 可 变 。 从 “属性 ”面板 的 “格式 ”下 拉 列 表 中 选择 
URL 文本 域 接受 http://xxx.xxx.xxx 或 fip://xxx.xxx.xxx 格式 的 URL 
可 用 于 指定 自 定义 验证 类 型 和 格式 。 在 属性 检查 器 中 输入 格式 模式 ， 并 根据 需要 输 
入 提示 


在 “属性 ”面板 中 , 设置 “类 型 ” 为 “电子 邮件 地 址 ”; 输入 “提示 ”为 “输入 邮箱 地 址 ”; 
选中 onBlur 复 选 框 ， 如 图 15-59 所 示 。 


RN | 


En 村 型 | 电子 部件 地 二 ~ 现状 态 3 划 
yt 并 De E 

SEL 四 | 好 人 和 沽 | | 最 人 | | 加 汉 雪 的 
提 云 清光 入 邮箱 证 让 + | 最 大 字符 尖 | | 最 大 入 | | 门 强 制 模式 。 


15-59 设置 属性 


@. 用 户 需要 选择 Spry 文本 域 时 ， 可 以 单 击 表 单 区 域 上 面 的 “Spry 文本 域 : 

提示 sprytextfield1” 选 项 卡 ， 即 可 弹出 “属性 ”面板 。 

然后 ， 按 F12 键 预览 其 效果 。 例如， 在 预览 页 面 中 输入 错误 的 E-mail 地 址 ， 即 可 提示 “ 格 
式 无 效 ”错误 信息 ， 且 以 “红色 ”高 亮度 显示 ， 如 图 15-60 所 示 。 输 入 正确 的 E-mail 地 址 时 ， 
将 以 “绿色 ”显示 ， 如 图 15-61 所 示 。 


舍 P》 用 户 可 以 禁止 在 验证 文本 域 组 件 中 输入 无 效 字符 。 例 如 ， 如 果 对 具有 “整数 ” 验 

技巧 」 ”证 类 型 的 组 件 集 启 用 “强制 模式 ” 复 选 框 。 那么 ， 当 输入 字母 时 ， 文 本 域 中 将 不 
显示 任何 内 容 。 

验证 文本 域 组 件 的 默认 HIML 通常 位 于 表单 内 部 ， 其 中 包含 一 个 <span> 标 签 ， 该 标签 将 

文本 域 的 <input> 标 签 括 起 来 。 在 验证 文本 域 组 件 的 HIML 中 ,在 文档 头 中 和 验证 文本 域 的 


mi) >> 
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HTML 标记 之 后 还 包括 脚本 标签 。 


duanshaozhi@126.com 


ETT 


图 15-60 ”格式 错误 提示 图 15-61 邮箱 正确 提示 


2. 修改 提示 信息 


除 此 之 外 ， 用 户 还 可 以 在 “代码 ”视图 中 ， 修 改 提示 信息 。 例 如 ， 将 “格式 无 效 ” 修 改 为 
“输入 格式 错误 ”等 ， 代 码 如 下 所 示 : 


<form id="forml" name="forml" method="post" action=""> 

<span id="sprytextfieldl1"> 

<label>Email 

<input type="text" name="textl" id="textl" /> 

</label> 

<span class="textfieldRequiredMsg"> 需 要 提供 一 个 值 。 
</span><span class="textfieldInvalidFormatMsg"> 格 式 无 效 。</span></span> 
</form> 
<script type="text/javascript"> 
< 
Var sprytextfieldl = new Spry.Widget.ValidationTextField("sprytextfield1l", 
"email"， {hint:" 请 输入 邮箱 地 址 ! "，validateon: ["blur"]}); 
VA 
</script> 


在 上 述 代码 中 ， 只 需要 将 代码 中 的 “格式 无 效 ” 修 改 为 “输入 格式 错误 ”， 就 可 以 使 用 了 。 
3. 修改 样式 
尽管 使 用 “属性 ”面板 可 以 简化 对 验证 文本 域 组 件 的 编辑 ， 但 是 并 不 支持 自 定义 的 样式 设 
置 任务 。 用 户 可 以 修改 验证 文本 域 组 件 的 CSS， 以 便 根据 自己 的 喜好 创建 带 有 样式 的 组 件 。 
通过 上 述 设 置 , 我 们 了 解 到 验证 文本 域 组 件 的 错误 消息 会 以 红色 显示 ,文本 周围 有 1 个 像 
素 宽 的 边框 。 如 果 用 户 需 要 更 改 CSS 规则 ， 可 以 先 来 了 解 如 表 15-6 所 示 的 文本 样式 属性 。 
表 15-6 文本 样式 CSS 规则 


要 更 改 的 文本 相关 CSS 规则 


-textfieldRequiredState .textfieldRequiredMsg、.textfieldInvalidFormatState .textfieldInvali 
dFormatMsg、 .textfieldMinValueState .textfieldMinValue Msg、 .textfieldMaxValueState .t 
extfieldMaxValueMsg、.textfieldMinCharsState .textfieldMinCharsMsg 或 
.textfieldMaxCharsState .textfieldMaxCharsMs: 


错误 消息 文本 


'* 开发 学 习 实录 - 必 


具体 更 改 规则 的 方法 如 下 : 

先 打开 “Spry 文本 域 : sprytextfieldl ”选项 卡 ， 在 “CSS 样式 ”面板 中 切换 到 “全 部 ”选项 卡 。 
然后 选择 “所 有 规则 ”列表 中 的 “.textfieldRequiredMsg, .textfieldInvalidFormatMsg, .textfieldM 
inValueMsg, .textfieldMaxValueMsg, .textfieldMinCharsMsg, .textfieldMaxCharsMsg, .textfieldV 
alidMsg” 规 则 ， 再 单 击 “ 编 辑 样式 ”按钮 。 

在 弹出 对 话 框 中 选择 “分 类 ”列表 的 “类 型 ”选项 , 并 设置 Font-family 为 “宋体 times New 
Roman”; Font-style 为 “italic”， 再 选中 Text-decoration 中 的 “line-through” 复 选 框 。 最 后 单 
击 “ 确 定 ” 按 钮 返回 。 此 时 , 按 F12 键 预览 所 设置 的 错误 消息 ， 并 显示 用 户 所 设置 的 文本 格式 ， 
如 图 15-62 所 示 。 


15-62 ”修改 错误 消息 样式 


”如 果 用 户 需 要 设置 文本 的 颜色 ， 可 以 在 .textfieldMaxCharsState.textfieldMaxCharsMsg 
| 规则 中 ， 修 改 消息 文本 的 字体 颜色 等 。 


Spry 验证 密码 组 件 是 一 个 密码 文本 域 ， 可 用 于 强制 执行 密码 规则 (例如 ， 字 符 的 数量 和 类 
型 )， 组 件 会 根据 用 户 的 输入 提示 警告 和 错误 消息 。 在 使 用 Spry 验证 密码 组 件 之 前 ， 读 者 首先 
应 该 熟悉 Spry 验证 组 件 的 使 用 ， 如 Spry 验证 文本 域 或 者 Spry 验证 文本 区 域 。 

Spry 验证 密码 组 件 可 以 通过 “Spry 验证 密码 ”按钮 如 ez 激活 。 单 击 它 会 弹出 “ 输 
入 标签 辅助 功能 属性 ”对 话 框 。 在 “标签 ”文本 框 中 输入 “密码 ”， 单 击 “ 确 定 ” 按 钮 即 可 在 
页 面 中 插入 Spry 验证 密码 组 件 ， 如 图 15-63 所 示 。 


提示 


15-63 ”插入 Spry 验证 密码 
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Spry 验证 密码 组 件 具 有 许多 状态 (例如 ， 有 效 、 必 需 和 最 小 字符 数 等 )。 用 户 可 以 根据 所 需 
的 验证 结果 ， 使 用 “属性 ”面板 来 修改 这 些 状态 的 属性 ， 如 图 15-64 所 示 。 
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图 15-64 ”Spry 验证 密码 “属性 ”面板 


Spry 验证 密码 组 件 可 以 在 不 同 的 时 间 点 进行 验证 。 例 如 ， 当 用 户 在 文本 域外 部 单 击 时 、 输 
入 内 容 时 或 尝试 提交 表单 时 。 表 15-7 中 对 “属性 ”面板 中 的 选项 进行 了 解释 。 


在 “属性 ”I 


H 


板 中 启用 onBlur 复 选 框 ， 设 置 允 许 用 户 在 密码 域 中 输入 6 一 12 位 字符 ， 其 


中 至 少 应 该 包含 2 个 字母 和 1 个 特殊 字符 。 


表 15-7 Spry 文 本 区 域 属性 参数 


名 称 功 能 
Spry 密码 标识 密码 的 名 称 ， 该 名 称 也 是 密码 的 ID 号 
初始 状态 在 浏览 器 中 加 载 页 面 或 用 户 重 置 表单 时 组 件 的 状态 
焦点 状态 当 用 户 将 光标 放置 在 组 件 上 时 的 状态 
这 有 效 状 态 当 用户 正 确 地 输入 信息 且 表 单 可 以 提交 时 组 件 的 状态 
必 填 状态 用 户 必 须 在 该 文本 区 域内 输入 数据 
2 强度 无 效 状态 当 用 户 输入 的 文本 不 符合 密码 文本 域 的 强度 条 件 时 
最 小 字符 数 状态 当 用 户 输入 的 字符 数 小 于 密码 文本 域 中 所 需 的 最 小 字符 数 时 
最 大 字符 数 状态 当 用 户 输入 的 字符 数 大 于 密码 文本 域 中 允许 的 最 大 字符 数 时 
验 onBlur 该 项 为 “模糊 ”状态 ， 即 当 用 户 在 文本 域 的 外 部 单 击 时 验证 
onChange 该 项 为 “更 改 ” 状 态 ， 即 当 用 户 更 改 文本 域 中 的 文本 时 验证 
间 onSubmit 该 项 为 “提交 ”状态 ， 即 当 用 户 尝试 提交 表单 时 验证 
最 小 字母 数 设置 用 户 在 密码 域 中 最 少 应 该 输入 的 字母 数量 
最 大 字母 数 设置 允许 用 户 在 密码 域 中 最 多 输入 的 字母 数量 
最 小 数字 数 设置 用 户 在 密码 域 中 最 少 应 该 输入 的 数字 数量 
最 大 数字 数 设置 允许 用 户 在 密码 域 中 最 多 输入 的 数字 数量 
最 小 大 写字 母 数 设置 用 户 在 密码 域 中 最 少 应 该 输入 的 大 写字 母 数量 


<@——— 
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续 表 
名 称 功 能 
最 大 大 写字 母 数 设置 允许 用 户 在 密码 域 中 最 多 输入 的 大 写字 母 数量 
最 小 特殊 字符 数 设置 用 户 在 密码 域 中 最 少 应 该 输入 除数 字 、 字 母 之 外 的 字符 数量 
最 大 特殊 字符 数 设置 允许 用 户 在 密码 域 中 最 多 输入 除数 字 、 字 母 之 外 的 字符 数量 


现在 ， 按 F12 键 预 览 Spry 验证 密码 组 件 的 效果 。 默 认 运 行 后 ， 当 “密码 ”文本 框 为 空 时 
会 提示 “需要 输入 一 个 值 ”， 并 以 “红色 ”背景 显示 。 此 时 ， 如 果 输 入 一 些 字符 ， 在 小 于 6 位 
时 (不 满足 最 小 字符 数 ) 就 会 提示 “不 符合 最 小 字符 数 ”。 

在 输入 的 字符 数 超过 12 位 时 (最 大 字符 数 ) 会 提示 “已 超过 最 大 字符 数 ”, 如 图 15-65 所 示 。 
在 允许 的 字符 数 内 ， 如 果 密 码 域 缺少 字母 或 特殊 字符 都 会 提示 “密码 未 达到 指定 的 强度 ”， 如 
图 15-66 所 示 。 图 15-67 所 示 为 正确 输入 时 的 密码 域 效 果 ， 没 有 任何 提示 ， 并 且 以 “绿色 ” 背 
景 显示 。 
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图 15-65 已 超过 最 大 字符 数 效 果 图 15-66 大 于 强度 效果 图 15-67 输入 正确 效果 


Spry 验证 确认 组 件 是 一 个 文本 域 或 密码 表单 域 。 当 用 户 输入 的 值 与 同一 个 表单 中 类 似 域 的 
值 不 匹配 时 , 该 组 件 将 显示 有 效 或 无 效 状态 。 例如 , 用 户 可 以 向 表单 中 添加 一 个 验证 确认 组 件 ， 
要 求 用 户 重新 输入 在 上 一 个 域 中 指定 的 密码 。 如果 用 户 未 能 完全 一 样 地 输入 他 们 之 前 指定 的 密 
码 ， 组 件 将 返回 错误 信息 ， 提 示 两 个 值 不 匹配 。 

在 “表单 ”选项 卡 中 ， 单 击 “Spry 验证 确认 ”按钮 加 SW |， 弹 出 “输入 标签 辅助 功能 
属性 ”对 话 框 。 并 在 “标签 ”文本 框 中 输入 “重复 密码 ”， 单 击 “ 确 定 ” 按 钮 ， 如 图 15-68 
所 示 。 
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15-68 插入 Spry 验证 确认 
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默认 情况 下 ， 使 用 Dreamweaver CS4 插入 的 所 有 Spry 验证 确认 组 件 在 发 布 到 网 页 时 ， 要 
求 用 户 输入 内 容 。 但 是 ， 用 户 可 以 将 填写 确认 文本 域 设置 为 是 可 选 的 。 如 图 15-69 所 示 为 Spry 
验证 确认 组 件 的 “属性 ”面板 ， 在 这 里 可 以 对 组 件 所 需 的 各 种 选项 进行 设置 。 
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图 15-69 ”Spry 验证 确认 的 “属性 ”面板 


Spry 验证 确认 组 件 的 属性 非常 少 。 除 了 其 他 组 件 共 有 的 预览 状态 和 验证 时 间 外 , 仅 包含 一 
个 “验证 参照 对 象 ”属性 。 该 属性 用 于 选择 用 于 验证 依据 的 文本 域 ， 文 本 域 可 以 是 页 面 上 分 配 
了 唯一 的 所 有 项 ， 均 可 以 在 下 拉 列 表 框 中 选择 。 

这 里 选择 15.6 节 使 用 Spry 验证 密码 组 件 创建 的 “password1”， 如 图 15-70 所 示 。 
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15-70 ”预览 Spry 验证 确认 效果 


Spry 验证 确认 组 件 还 可 以 与 验证 文本 域 组 件 一 起 使 用 ， 用 于 验证 电子 邮件 地 址 。 


Spry 验证 单 选 按钮 组 件 是 一 组 单 选 按钮 ， 可 支持 对 所 选 内 容 进行 验证 ， 该 组 件 可 强制 从 组 
件 中 选择 一 个 单 选 按钮 。 单 击 时 swesssmg 按钮 则 可 以 执行 相关 插入 操作 。 
此 时 会 弹出 “Spry 验证 单 选 按钮 组 ”对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 该 单 选 按钮 组 的 名 
称 。 通过 单 击 “ 添 加 ”按钮 诗 成 者 “删除 ”按钮 局 向 组 中 添加 或 者 从 组 中 删除 单 选 按钮 。 在 “ 标 
签 ” 列 中 , 单 击 每 个 单 选 按钮 的 名 称 可 以 进行 编辑 , 并 为 每 个 单 选 按 钮 分 配 唯 一 的 名 称 。 在 “ 值 ” 
列 中 ， 单 击 对 每 个 值 进行 编辑 ， 并 分 配 一 个 唯一 的 值 。 

在 “布局 方式 ”选项 中 默认 选择 了 “换行 符 (<br> 标 签 )” 单 选 按钮 ， 这 种 方式 将 会 使 用 换 
行 符 (<br> 标 签 ) 将 每 个 单 选 按钮 放置 在 单独 的 行 中 。 如 果 选 择 “ 表 ” 单 选 按钮 则 会 使 用 单独 的 
表格 行 (<t> 标 签 ) 将 每 个 单 选 按钮 放置 在 单独 的 行 中 。 


<@——— 
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最 后 ， 再 单 击 【 确 定 】 按 钮 将 Spry 验证 单 选 按钮 组 组 件 插入 页 面 ， 如 图 15-71 所 示 。 
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图 15-71 插入 Spry 验证 单 选 按 钮 组 
这 里 以 默认 的 布局 方式 为 例 ， 为 Spry 验证 单 选 按 钮 组 添加 适量 标签 并 设置 值 。 打 开 组 件 
的 “属性 ”面板 并 启用 onBlur 复 选 框 ， 在 “ 空 值 ”文本 框 中 输入 “1”， 在 “无 效 值 ”文本 框 
中 输入 “2”， 如 图 15-72 所 示 。 
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15-72 ”设置 Spry 验证 单 选 按钮 组 属性 


在 本 实例 中 值 “1” 对 应 “男性 ” 单 选 按钮 ， 值 “2” 对 应 “女性 ” 单 选 按钮 。 这 样 如 果 用 
户 选 择 具有 空 值 的 单 选 按钮 ， 则 浏览 器 将 返回 “请 进行 选择 ”错误 消息 ， 如 图 15-73 所 示 。 


15-73 ”使 用 空 值 时 
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Spry 验证 选择 组 件 是 一 个 下 拉 菜 单 ,该 菜单 在 用 户 选 择 时 会 显示 组 件 的 状态 (有 效 或 无 效 )。 
例如 ， 插 入 一 个 包含 状态 列表 的 验证 选择 组 件 ， 这 些 状态 按 不 同 的 部 分 组 合并 用 水 平 线 分 隔 。 
如 果 用 户 意外 选择 了 某 条 分 界线 (而 不 是 某 个 状态 )， 验 证 选择 组 件 会 向 用 户 返 回 一 条 消息 ， 声 
明 选 择 无 效 。 

在 “表单 ”选项 卡 中 ， 单 击 “Spry 验证 选择 ”按钮 轴 se |， 弹 出 “输入 标签 辅助 功能 
属性 ”对 话 框 。 并 在 “标签 ”文本 框 中 输入 “出 生地 ”， 单 击 “ 确 定 ” 按 钮 ， 如 图 15-74 所 示 。 
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15-74 ”插入 Spry 验证 选择 


国 》 此 时 ， 将 弹出 Spry 验证 选择 “属性 ”面板 ， 并 在 该 面板 中 设置 验证 选择 是 否 为 空 
注意 | ” 值 、 预 览 状 态 ， 以 及 设置 验证 发 生 的 时 间 。 
现在 ， 用 户 可 以 选择 菜单 域 ， 单 击 “属性 ”面板 中 的 “列表 值 ”按钮 。 然 后 ， 在 弹出 的 
“列表 值 ”对 话 框 中 ， 单 击 “ 添 加 ”按钮 ， 并 添加 “项 目标 签 ”和 “ 值 ” 内容， 如 表 15-8 所 
表 15-8 添加 列表 值 内 容 


项 目标 签 值 
请 选择 地 区 空 
中 国 型 
河南 
山西 
河北 
湖北 


上 | | |- 


最 后 ， 切 换 到 “Spry 选择 : spryselectl ”选项 卡 ， 在 “属性 ”面板 中 选中 “ 空 值 ” 和 “无 
效 值 ” 复 选 框 ， 并 设置 “无 效 值 ”为 -1， 再 设置 “预览 状态 ”为 “初始 ”， 选 中 onBlur 复 选 
框 ， 如 图 15-75 所 示 。 

此 时 ， 按 F12 键 预览 Spry 验证 选择 效果 。 例 如 ， 从 “出 生地 ”列表 中 的 “请 选择 地 区 ” 
项 时 ， 提 示 “ 请 选择 出 生地 ”信息 ， 并 以 “红色 ”背景 显示 ; 如 果 选 择 了 出 生地 则 以 “绿色 ” 
背景 显示 ， 如 图 15-76 所 示 。 
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图 15-75 设置 属性 参数 


当 用 户 设 置 Spry 验证 文本 区 域 “属性 ”面板 后 ， 还 可 以 在 “CSS 样式 ”面板 中 设 
各 | 。 置 该 验证 文本 区 域 CSS 规则 。 其 设置 方法 与 Spry 验证 文本 域 相同 ， 
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图 15-76 ”预览 Spry 验证 选择 效果 
15.7.3 ”运行 结果 


运行 Register.html 页 面 ， 运 行 结果 如 图 15-77 所 示 。 
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图 15-77 用 户 注册 运行 结果 图 
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15.7.4 实例 分 析 


让 源码 解析 : 


本 实例 通过 Dreamweaver CS4 中 Spry 框架 的 内 置 组 件 制作 了 一 个 用 户 注册 页 面 。 这 些 组 
件 主要 有 : 文本 域 、 密 码 域 、 密 码 确认 、 单 选 按 钮 和 选择 列表 等 。 
通过 使 用 Spry 框架 提供 的 丰富 用 户 交互 组 件 ， 使 得 客户 端的 开发 和 验证 更 加 方便 和 快捷 。 


15.8 ”常见 问题 解答 


15.8.1 将 样式 保存 至 本 地 服务 器 


如 何 将 生成 的 样式 保存 至 本 地 服务 器 上 呢 ? 
网 络 课堂 : http:/Wbbs.itzcn.comy/thread-12313-1-1.html 


今天 使 用 Dreamweaver CS4 生成 了 整个 系统 的 CSS 样式 信息 ， 可 是 发 现 页 面 代码 太 多 了 ， 
而 且 70% 都 是 CSS 样式 表 ， 我 可 否 将 样式 信息 保存 至 本 地 呢 ? 

【解决 办 法 】 可 以 将 CSS 样式 保存 至 本 地 服务 器 ， 只 需要 在 “新 建 CSS 规则 ”对 话 框 下 
面 的 “规则 定义 ”下 拉 列 表 框 中 选择 “新 建 样式 表 文 件 ”选项 ， 如 图 15-78 所 示 , 默认 选择 “ 仅 
限 该 文档 ”选项 。 


连 择 器 关 型- 
cs 对 旋 上 下 驻 作 类 
芝 ( 恒生 XIL 元 来) 


15-78 “新 建 CSS 规则 ”对 话 框 
15.8.2 ”Spry 框架 设置 超 链 接 


使 用 Spry 框架 创建 菜单 栏 时 主 菜单 是 否 可 以 设置 超 链接 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-12314-1-1.html 


<@——— 


创建 好 菜单 栏 后 ， 若 希望 在 创建 的 主 菜单 选项 上 设置 一 个 超 链 接 ， 是 否 可 以 直接 像 子 菜单 
一 样 设置 ， 如 图 15-79 所 示 。 
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图 15-79 菜单 栏 属性 


【解决 办 法 】 即 使 具有 子 菜单 的 菜单 栏目 也 可 以 设置 超级 链接 ， 这样 既 可 以 通过 该 菜单 栏 
目 显示 相应 的 子 菜单 ， 也 可 以 单 击 该 菜单 栏目 跳 转 到 其 他 网 页 。 


15.9 习 题 

1. 填空 题 

(1) Dreamweaver 是 一 个 所 见 即 所 得 的 编辑 器 , 在 HTML 代码 编辑 方面 提供 了 非常 强大 的 
功能 。 其 中 可 以 在 、 代 码 视图 与 拆 分 视图 中 分 别 进行 查看 与 编辑 。 

(2) 编码 工具 栏 包含 可 用 于 执行 多 种 标准 编码 操作 的 按钮 ,例如 折合 和 展开 所 选 代码 、 应 
用 和 删除 注释 、 、 插 入 最 近 使 用 过 的 代码 片段 等 。 

(3) Spry 框架 支持 一 组 用 标准 HIML、CSS 和 编写 的 可 重用 组 件 。 

(4) Spry 框架 中 的 每 个 组 件 都 与 唯一 的 CSS 和 文件 相关 联 。CSS 文件 中 包含 
设置 组 件 样式 所 需 的 全 部 信息 ， 而 JavaScript 文件 则 赋予 组 件 功能 。 

2. 选择 题 


(1) 在 “新 建 CSS 规则 ”对 话 框 中 没有 的 下 拉 列 表 框 是 
A. “选择 器 类 型 ”下 拉 列 表 框 。” B.“ 选 择 器 名 称 ” 下 拉 列 表 框 
C. “菜单 功能 ”下 拉 列 表 框 D. “规则 定义 ”下 拉 列 表 框 
(2) Spry 组 件 是 一 个 页 面 元 素 ， 通 过 启用 用 户 交 互 来 提供 更 丰富 的 用 户 体 验 。 每 个 Spry 
， 组 件 均 由 几 个 部 分 组 成 ， 以 下 选项 中 属于 该 组 件 的 部 分 是 pg 
A. 组 件 名 称 B. 组 件 结构 C. 组 将 动作 D. 组 件 形成 
(3) 使 用 Spry 框架 可 以 在 页 面 中 轻松 制作 出 页 面 展示 特效 ， 下 面 不 属于 该 框架 的 内 容 是 


A. 折 梧 菜单 B. 多 标签 式 选项 卡 


C. 垂直 /水 平 多 级 导航 D. 统计 报表 
3. 上 机 练习 


上 机 练习 : 最 新 日 志 推 荐 
实例 要 求 : 使 用 Spry 框架 中 的 选项 卡 面 板 制作 出 最 新 日 志 推荐 、 周 单 击 量 、 月 单 击 量 和 
单 击 排行 的 栏目 切换 功能 ， 运 行 结果 如 图 15-80 所 示 。 
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图 15-80 


最 新 日 志 推 荐 
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内 容 摘 要 : 


XML 是 一 种 描述 性 语言 ， 用 于 对 网 络 数据 的 转换 和 描述 。 与 HTML 不 同 ，XML 没有 规 
定 的 标记 ， 只 要 符合 XML 规范 ， 用 户 就 可 以 根据 需要 自行 创建 标记 来 描述 XML 文档 要 表达 
的 内 容 ， 并 且 可 以 在 XML 文档 中 调用 CSS 样式 进行 优化 ， 这 样 可 以 制作 出 规范 的 网 页 。 本 章 
将 介绍 如 何 创 建 一 个 XML 文档 、 如 何在 XML 文档 中 调用 CSS 样式 文件 和 XML 文档 ， 如 何 
实现 各 行 变色 的 表格 。 

学 习 目 标 : 

@ 掌握 XML 文档 的 基本 语法 

@ 掌握 如 何在 XML 文档 中 调用 CSS 样式 文件 

@ 掌握 XML 实现 表格 隔行 变色 的 方法 


16.1 创建 简单 的 XML 文件 


XML(Extensible Markup Language, 即 可 扩展 标记 语言 ) 与 HTML 一 样 ,都 是 SGML(Standard 
Generalized Markup Language， 标 准 通用 标记 语言 )。XML 是 Internet 环境 中 跨 平台 的 ， 依 赖 于 
内 容 的 技术 ， 是 当前 处 理 结构 化 文档 信息 的 有 力 工具 。 扩 展 标记 语言 XML 是 一 种 简单 的 数据 
存储 语言 , 其 使 用 一 系列 简单 的 标记 描述 数据 , 而 这 些 标记 可 以 用 方便 的 方式 建立 ,虽然 XML 
比 三 进 制 数 据 要 占用 更 多 的 空间 ， 但 XML 极其 简单 且 易 于 掌握 和 使 用 。 

XML 是 一 种 元 标记 语言 , 它 可 以 在 多 种 领域 应 用 ， 虽然 XML 允许 用 户 自行 创建 标记 , 但 
是 必须 遵循 XML 规范 及 文档 结构 。 本 节 将 讲解 如 何 创建 一 个 XML 文档 。 


ES 视频 教学 : 光盘 /视频 /16/16.1 创建 简单 的 XML 文件 .avi @K 放 :1 分 名 


16.1.1 基础 知识 一 一 创建 XML 文档 


随 着 Web 的 广泛 使 用 , HTML 的 局 限 性 逐渐 暴露 出 来 。 最 重要 的 就 是 HTML 缺乏 扩展 性 。 
为 了 满足 Web 的 交互 操作 性 和 可 扩展 性 的 要 求 , W3C 推出 了 一 种 标准 化 的 、 具 备 高 扩展 性 的 、 
结构 严谨 的 新 语言 一 一 XML。 

1. XML 简介 


XML 具有 很 高 的 灵活 性 ， 但 是 必须 遵循 一 定 的 结构 ， 才 能 保证 XML 文档 具有 规范 性 。 
XML 文档 结构 可 以 分 为 三 个 部 分 : 序言 、 主 体 和 尾声 。 其 中 , 序言 和 主体 是 每 个 XML 文档 必 
须 保留 的 ， 而 尾声 则 可 以 根据 用 户 的 需要 来 使 用 。 

1) 序言 

序言 是 XML 文档 的 开始 , 用 来 表示 对 XML 数据 进行 编译 的 开始 及 描述 字符 的 编码 方法 ， 
并 为 XML 解析 器 和 应 用 程序 提供 其 他 一 些 配置 线索 。 序 言 部 分 格式 代码 如 下 : 


<?xml version=“1.0” encoding= “编码 ” standalone= “yes/no”?> 


格式 中 各 参数 的 含义 如 下 。 
@ version: 指定 了 所 采用 的 XML 版 本 号 ， 通 常情 况 下 ， 目 前 Web 支持 的 是 XML 1.0 
版 本 。 


@ encoding: 指定 了 文档 的 编码 格式 。 常 用 的 编码 格式 有 UTF-8 和 GB2312 两 种 。 在 
XML 文档 中 未 指定 编码 格式 的 情况 下 ， 默 认为 UTF-8 格式 。 使 用 UTF-8 格式 ， 标 记 
以 及 标记 的 内 容 就 可 以 使 用 中 文 、 日 文 、 英 文 等 ，XML 解析 器 就 会 识别 这 些 标记 并 
正确 解析 标记 中 的 内 容 , 使 用 GB2312 格式 , 则 标记 以 及 标记 的 内 容 只 可 以 使 用 ASCII 
字符 和 中 文 。 

@ standalone: 表示 使 用 的 DTD 的 形式 , 值 只 能 是 yes 或 no， 默认 值 为 no。 如果 为 yes， 
说 明 所 有 必需 的 实体 声明 都 包含 在 文档 中 ; 如 果 是 no， 则 说 明 需 要 引用 外 部 实体 。 
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2) 主体 


主体 就 是 XML 文档 描述 数据 的 地 方 ， 通 常 由 标记 、 元 素 和 属性 等 构件 组 成 。 
3) 尾声 
XML 文档 的 尾声 部 分 内 容 包 括 注释 、 处 理 指令 和 /或 紧 跟 元 素 树 后 的 空白 。 由 于 大 多 数 应 
用 程序 在 文档 根 元 素 的 结束 标记 处 就 结束 了 ， 而 不 再 对 尾声 进行 任何 处 理 ， 所 以 尾声 部 分 对 于 
XML 文档 来 说 不 起 任何 作用 。 用 户 可 以 根据 需要 选择 是 否 添加 尾声 。 
2. XML 标记 与 元 素 
XML 是 一 种 基于 文本 的 标记 语言 。 标 记 与 元 素 在 文档 中 是 必 不 可 少 的 ， 它 们 是 构成 XML 
文档 最 重要 的 构件 。 
1) 标记 
在 XML 中， 标记 可 分 为 非 空 标 记 和 空 标记 两 种 。 
非 空 标记 由 尖 括 号 (二) 来 界定 ， 以 左 尖 括 号 (<) 开 始 ， 以 右 尖 括 号 >) 结束。 例如, 给 出 一 个 
XML 文档 ， 如 下 所 示 : 
<?xml version="1.0" encoding="UTF-8"?> 
< 学 生 > 
< 姓名 > 李 赞 红 </ 姓 名 > 
< 性 别 > 男 </ 性 别 > 
< 专业 > 计算 机 </ 专 业 > 
</ 学 生 > 
在 该 XML 文档 中 ，< 学 生 > 和 </ 学 生 > 都 是 标记 ，< 学 生 > 称 为 开始 标记 ，</ 学 生 > 称 为 结束 
标记 。 同 样 ，< 性 别 > 和 < 专业 > 都 是 开始 标记 ，</ 性 别 > 和 </ 专 业 > 则 为 结束 标记 。 非 空 标记 在 开 
始 标记 和 结束 标记 之 间 必 须 有 数据 的 标记 。 


0 | 在 XML 文档 中 ， 开 始 标记 和 结束 标记 都 是 成 对 出 现 的 。 


空 标记 以 “<” 开 始 ， 以 “入 ”结束 。 空 标记 不 标记 任何 内 容 ， 所 以 空 标记 没有 开始 标记 
和 结束 标记 ， 但 空 标 记 内 可 以 包含 属性 ， 如 下 所 示 : 

< 学 生 /> 

< 学 生 姓名 =" 李 赞 红 " 性别 =" 男 ”专业 =" 英 语 "/> 


在 第 二 个 非 空 标 记 中 ， 姓 名 、 性 别 和 专业 都 是 标记 学 生 包含 的 属性 。 


| 无 论 是 非 空 标记 还 是 空 标记 ， 在 左 类 括号 “<” 前 不 能 有 空格 ， 

2) 元 素 

元 素 也 是 XML 文档 中 最 重要 的 构件 。 元 素 可 以 用 来 描述 其 所 包含 的 数据 ， 还 可 以 包含 属 
性 名 称 和 值 ， 用 于 提供 有 关内 容 的 其 他 信息 ， 并 指出 这 些 信息 的 逻辑 结构 。 在 XML 文档 中 ， 
只 有 一 个 根 元 素 ， 其 他 元 素 在 根 元 素 内 是 以 树 形 分 层 结构 来 排列 的 ， 而 且 元 素 是 可 以 柑 套 使 
用 的 。 

在 XML 中， 元素 可 分 为 非 空 元 素 和 空 元 素 两 种 关 型 。 


< 人 mm 


一 个 非 空 元 素 是 由 开始 标记 、 结 束 标 记 及 两 标记 之 间 的 数据 构成 的 。 开 始 标记 和 结束 标记 
用 来 描述 标记 之 间 的 数据 。 标 记 之 间 的 数据 被 认为 是 元 素 的 值 。 非 空 元 素 的 语法 结构 如 下 : 


< 开始 标记 > 数据 内 容 </ 结 束 标记 > 

而 空 元 素 就 是 不 包含 任何 内 容 的 元 素 ， 其 语法 结构 如 下 : 

< 开始 标记 ></ 结 束 标 记 > 

在 XML 文档 中 ， 规 范 的 XML 标记 与 元 素 有 助 于 正确 地 描述 数据 ， 所 以 它们 必须 遵循 如 
下 命名 规则 。 


@ 元素 名 中 可 以 包含 字母 、 数 字 和 其 他 字符 ， 如 <place>、< 地 点 >、<no123> 等 。 元 素 名 
中 虽然 可 以 包含 中 文 ， 但 是 有 一 些 软件 不 能 很 好 地 支持 这 种 命名 ， 所 以 尽量 使 用 英文 
字母 来 命名 ; 也 不 要 使 用 “:”， 因 为 XML 命名 空间 需要 用 到 这 个 十 分 特殊 的 字符 。 

@ ”标记 或 元 素 名 必须 规范 ， 名 称 必须 以 字母 、 下 划 线 (_) 或 中 文 开头 ， 而 不 能 用 数字 或 标 
点 符号 开头 ， 中 间 不 允许 有 空格 ， 例 如 <book>、<_book>、< 图 书 _ book> 等 都 是 正确 
的 名 称 。 

@ 名称 中 不 能 以 字母 xml 的 任意 形式 开头 (如 XML 或 Xml 等 ), 如 <xmlbook>、<Xmlbook> 

都 是 错误 的 。 

名 称 中 不 能 包含 空格 ， 如 < 图 书 book>。 

文档 中 的 标记 必须 对 应 ， 每 一 个 XML 文档 都 必须 有 开始 标记 和 结束 标记 。 

标记 区 分 大 小 写 ， 例 如 标记 <book> 和 <Book> 是 两 个 不 同 的 标记 。 

元 素 标记 必须 合理 地 包含 ， 在 XML 文档 中 不 允许 不 合理 的 嵌 套 包含 ， 即 开始 标记 和 

结束 标记 要 紧 紧 呼应 。 

@ ”对 于 元 素 中 的 开始 标记 和 结束 标记 ， 要 保证 成 对 出 现 ， 并 且 大 小 写 一 致 。 

3. XML 属性 


XML 属性 可 以 将 一 些 额 外 的 信息 附加 到 元 素 上 ， 从 而 使 文档 对 元 素数 据 特性 的 描述 更 加 
具体。 如 果 用 户 不 希望 通过 子 元 素来 描述 元 素 的 一 些 特性 ， 则 可 以 使 用 属性 来 存储 。 属 性 一 般 
在 元 素 的 开始 标记 中 声明 ， 由 属性 名 和 值 构成 。 它 在 非 空 元 素 和 空 元 素 中 的 语法 格式 如 下 : 
| 非 空 元 素 < 标记 名 属性 列表 >..</ 标 记名 > 
空 元 素 < 标记 名 属性 列表 ></ 标 记名 > 
或 
< 标记 名 属性 列表 /> 
在 XML 中 使 用 属性 需要 遵循 下 列 规则 。 
@ 属性 名 的 命名 规则 和 元 素 的 命名 规则 相同 ， 可 以 由 字母 、 数 字 、 中 文 及 下 划 线 组 成 ， 
但 必须 以 字母 、 中 文 或 下 划 线 开头 ， 例 如 : sex、_sex 或 性 别 都 是 正确 的 。 
@ 属性 名 区 分 大 小 写 ， 例如 : Sex 和 sex， 虽 然 描 述 的 都 是 姓名 ， 但 是 编译 时 是 两 个 不 
同 的 属性 。 
@ 属性 值 必须 使 用 单 引号 或 双 引 号 ， 例 如 : "male"、'male'， 它 们 描述 的 是 相同 的 属 
性 值 。 
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如 果 属 性 值 中 要 使 用 左 尖 括 号 “<”、 右 尖 括 号 “>”、 连 接 符号 “全 ”、 单 引号 “ 
或 双 引 号 “""” 时 ， 必 须 使 用 实体 引用 。 


在 XML 文档 中 ,使 用 子 元 素 和 属性 都 可 以 实现 对 数据 描述 信息 的 存储 。 例 如 用 元 素 和 属 
性 来 描述 各 种 桌子 的 尺寸 ， 文 档 如 下 : 


</xml version="1.0" encoding="UTF-8"?> 


< 桌子 > 


< 老板 桌 > 
< 长 >160cm</ 长 > 
< 宽 >80cm</ 宽 > 
< 高 >78cm</ 高 > 
</ 老 板 桌 > 
< 书桌 > 
< 长 >120cm</ 长 > 
< 宽 >60cm</ 宽 > 
< 高 >75cm</ 高 > 
</ 书 桌 > 


</ 桌 > 


XML 中 ， 对 于 何 时 使 用 属性 ， 何 时 使 用 子 元 素 并 没有 特定 的 规则 ， 只 能 根据 执行 环境 和 
需要 来 决定 使 用 哪个 表现 方式 。 但 是 ， 在 文档 中 使 用 属性 会 引发 下 列 问 题 。 


属性 不 能 包含 多 个 数值 ( 子 元 素 可 以 )。 
属性 不 容易 扩展 。 

属性 不 能 够 描述 文档 结构 ( 子 元 素 可 以 )。 
属性 很 难 被 程序 代码 处 理 。 
属性 值 很 难 通过 DTD 进行 测试 。 


建议 读者 尽量 使 用 子 元 素 而 少 用 属性 。 由 于 XML 的 高 扩展 性 ， 所 以 数据 在 XML 中 需要 
经 常 增加 和 修改 。 如 果 将 增加 或 修改 的 数据 放 入 属性 中 ， 那 么 将 非常 不 利于 对 数据 的 维护 和 


更 新 。 


16.1.2 ”实例 描述 


我 有 一 个 朋友 是 画家 ， 他 的 画室 每 天 都 会 有 各 种 各 样 的 画展 现 给 大 家 ， 每 张 画 下 面 都 会 有 
一 个 简单 的 介绍 ， 比 如 说 这 张 画 的 名 称 、 作 者 ， 以 及 作者 的 国家 、 公 司 ， 当 然 每 张 画 的 价钱 是 
最 关键 的 。 他 每 天 都 会 在 一 个 木板 上 面 刻 上 不 同 的 字 来 介绍 某 张 画 。 我 看 到 后 ， 很 是 不 解 ， 何 
必 这 样 跟 自己 过 不 去 呢 ， 于 是 我 帮 他 写 了 个 XML 文件 ， 只 要 在 页 面 中 读 取 该 XML 文件 ， 然 
后 打印 在 纸 上 ， 贴 在 木板 上 就 OK 了 。 

下 面 就 让 我 们 来 看 看 当时 我 给 他 写 的 XML 文件 吧 ! 


16.1.3 ”实例 应 用 


【 例 16-1】 创建 简单 的 XML 文件 
编辑 16-1.xml 文件 ， 内 容 如 下 所 示 : 


< 


<?xml version="1.0" encoding="utf-8"?> 
<CATALOG> 
<CD> 
<TITLE>Empire Burlesque</TITLE> 
<ARTIST>Bob Dylan</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Columbia</COMPANY> 
<PRICE>10.90</PRICE> 
<YEAR>1985</YEAR> 
</CD> 
<CD> 
<TITLE>Hide your heart</TITLE> 
<ARTIST>Bonnie Tyler</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>CBS Records</COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1988</YEAR> 
</CD> 
</CATALOG> 


16.1.4 ”实例 分 析 


6 源码 解析 : 


在 这 个 实例 中 ，16-1.xml 文件 使 用 元 素 和 属性 相 结合 的 方式 实现 了 对 数据 的 描述 信息 ， 其 
中 ，<CD></CD> 是 XML 元 素 ，<TITLE></TITLE>、<ARTIST></ARTIST> 等 是 XML 属性 ， 
这 样 结合 使 用 ， 就 完成 了 描述 数据 的 功能 。 


16.2 在 XML 中 引用 外 部 CSS 样式 文件 制作 家 电 条 幅 


XML 关心 的 是 数据 的 结构 ， 并 能 很 好 、 方 便 地 描述 数据 ， 但 它 不 提供 数据 的 显示 功能 。 
因此 ， 浏 览 器 不 能 直接 显示 XML 文件 中 标记 的 文本 内 容 ， 如 果 想 让 浏览 器 显示 XML 文件 中 
标记 的 文本 内 容 ， 则 必须 以 某 种 方式 告诉 浏览 器 如 何 显示 。W3C 为 XML 数据 显示 发 布 了 两 个 
建议 规范 : CSS( 层 全 样式 表 ) 和 XSL( 可 扩展 样式 语言 )， 本 节 重 点 讲述 怎样 使 用 CSS 显示 XML 
标记 中 的 文本 内 容 。 


ce 视频 教学 : 光盘 /视频 /16/16.3 在 XML 中 嵌入 CSS 样式 制作 家 电 条 幅 .avi ”名 长 度 : 7 分 钟 
16.2.1 ”基础 知识 一 一 使 用 CSS 显示 XML 中 的 数据 
在 CSS 中 ， 最 重要 的 概念 就 是 样式 表 。 样 式 表 是 一 组 规则 ， 通 过 这 组 规则 告诉 浏览 器 用 


>> 
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什么 样式 来 显示 文本 ， 比 如 ， 告 诉 浏览 器 使 用 什么 样 的 字体 、 颜 色 和 页 边 距 来 显示 文本 。 一 个 
样式 表 的 格式 如 下 : 


文本 代表 
{ 


样式 规则 
} 
对 于 XML 文件 ， 样 式 表 中 的 “文本 代表 ”可 以 是 标记 的 名 称 。 样 式 表 中 的 “样式 规则 ” 
是 若干 个 用 分 号 分 隔 的 “属性 名 : 属性 值 ”， 例 如 : 
TITLE 


下 
display:block;font-size:36px;font-weight:bold; 


》$ 对 于 XML 文件， 样式 表 中 的 “文本 代表 ”可 以 是 标记 的 名 称 ， 也 可 以 是 标记 的 名 
| 称 与 该 标记 的 ID 属性 值 用 “#"” 连接 起 来 的 字符 串 。 当 XML 有 许多 标记 具有 相 
同 的 名 字 ， 需 要 使 用 不 同 的 外 观 来 显示 它们 的 内 容 时 ，“ 文 本 代表 ”使 用 “标记 

名 称 ”+“#”+“ID 属性 值 ”就 显得 很 方便 了 ， 这 样 我 们 可 以 为 这 些 名 字 的 标记 

指定 不 同 的 ID 属性 值 。 

其 中 ，“TITLE ”表示 页 面 中 “<TITLE> 与 </TITLE>” 之 间 的 内 容 要 引用 的 样式 ; 
“display:block; ”告知 浏览 器 将 “<TITLE>...</TITLE>” 所 标记 的 文本 内 容 显 示 在 一 个 “ 块 区 
域 ”; “font-size:36px;” 设 置 文本 字体 的 大 小 为 36 像素 ，“font-weight:bold;” 的 作用 是 让 文 
本 加 粗 显示 。 

为 了 让 XML 使 用 层 每 样式 表 ，XML 文件 必须 使 用 操作 下 面 的 操作 指令 将 当前 的 XML 文 
件 关 联 到 某 个 层 迭 样式 表 。 

<?xml-stylesheet href=" 样 式 表 的 URL" type="text/css"?> 

样式 表 的 URL 如 果 是 一 个 文件 的 名 字 ， 该 文件 必须 和 XML 文件 在 同一 目录 中 ， 例 如 : 


<?xml-stylesheet href="show.css" type="text/css"?> 


样式 表 的 URL 如 果 是 一 个 链接 ， 该 链接 必须 是 有 效 的 和 可 访问 的 ， 例 如 : 


<?xml-stylesheet href=”"http;//www.yahoo.com/show.css” type=”text/css”?> 


消 
六 


16.2.2 ”实例 描述 


最 近 手 头 终于 宽裕 了 点 ， 就 想 着 买 台电 视 机 看 看 ， 到 了 家 电 商 场 一 看 , 条幅 上 写 着 几 种 电 
视 机 的 规格 和 简介 。 商 人 真是 聪明 啊 , 这样 一 来 让 顾客 很 清晰 地 看 到 自己 想 要 的 是 哪 种 规格 的 
电视 机 , 而 不 用 在 这 么 大 的 商场 里 面 转悠 半天 , 说 不 定 到 头 来 也 没有 自己 心中 想 要 的 那 种 规格 ， 
这 样 岂 不 是 很 浪费 自己 的 宝贵 时 间 吗 ? 如 果 在 商场 的 进口 处 ， 用 一 张 条幅 很 醒目 地 贴 出 来 ， 可 
以 为 顾客 节省 很 多 时 间 啊 ! 
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下 面 我 们 就 使 用 XML 文件 引用 外 部 CSS 文件 制作 这 个 条 幅 吧 ! 


16.2.3 ”实例 应 用 


【 例 16-2】 在 XML 中 引用 外 部 CSS 样式 文件 制作 家 电 条 幅 
(1) 新 建 16-2.xml 文件 ， 内 容 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 


<root> 
<TV> 
电视 机 
<price> 
三 种 价格 : 
<iteml>34 寸 纯 平 1388 元/ 台 </item1> 
<item2>34 寸 数字 高 清 1899 元 / 台 </item2> 
<item3>34 寸 液 晶 5999 元 / 台 </item3> 
</price> 
<date> 生 产 日 期 : 2010 年 12 月 </date> 
<made> 北 京 电视 机 厂 生产 </made> 
</TV> 
</root> 


(2) 在 CSS 文件 夹 下 新 建 show.css 样式 文件 ， 设 置 上 面 的 XML 文件 内 容 的 样式 。 
(3) 在 show.css 样式 文件 中 编辑 “TV” 标签 样式 ， 设 置 16-2.xml 文件 中 <TV> 与 </TV> 之 


间 内 容 的 样式 ， 代 码 如 下 : 


TV 
3 
background-image:url(../images/431654.jpg); 
display:block; 
font-size:28px; 
font-weight:bold; 
color:black; 
height:600px; 
} 


(4) 在 show.css 样式 文件 中 编辑 price 标签 样式 , 设置 16-2.xml 文件 中 <price> 与 </price> 之 


间 内 容 的 样式 ， 代 码 如 下 : 


price 

{ 
display:list-item; 
list-style-type:decimal; 
margin-left:30px; 
font-size:18px; 
color:red; 


} 
(5) 在 show.css 样式 文件 中 编辑 “iteml ”标签 样式 ,设置 16-2.xml 文件 中 <item1> 与 </item1> 
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之 间 内 容 的 样式 ， 代 码 如 下 : 

iteml 

{ 
display:1list-item; 
list-style-type:square; 
margin-left:60px; 
font-size:18px; 
font-weight:bold; 
color:red; 


} 


(6) 在 show.css 样式 文件 中 编辑 “item2 ”标签 样式 ,设置 16-2.xml 文件 中 <item2> 与 </item2> 
之 间 内 容 的 样式 ， 代 码 如 下 : 


item2 

{ 
display:list-item; 
list-style-type:square; 
margin-left:60px; 
font-size:18px; 
font-weight:bold; 
color:red; 


} 


(7) 在 show.css 样式 文件 中 编辑 “item3 ”标签 样式 , 设置 16-2.xml 文件 中 <item3> 与 </item3> 
之 间 内 容 的 样式 ， 代 码 如 下 : 


item3 

{ 
display:list-item; 
list-style-type:square; 
margin-left:60px; 
font-size:18px; 
font-weight:bold; 
color:red; 


(8) 在 show.css 样式 文件 中 编辑 “date” 标 签 样式 ， 设 置 16-2.xml 文件 中 <date> 与 </date> 
之 间 内 容 的 样式 ， 代 码 如 下 : 
date 
1 
display:list-item; 
list-style-type:decimal; 
margin-left:30px; 
font-size:18px; 
Color:#9900FF; 


(9) 在 show.css 样式 文件 中 编辑 “made ”标签 样式 , 设置 16-2.xml 文件 中 <made> 与 </made> 


< 环 人 mm 
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之 间 内 容 的 样式 ， 代 码 如 下 : 


made 


{ 


display:1list-item; 
list-style-type:decimal; 
margin-left:30px; 
font-size:18px; 
color:#9900FF; 

} 


(10) 最 后 在 16-2.xml 文件 中 引入 show.css 文件 。 在 16-2.xml 文件 中 添加 : 


<?xml-stylesheet href="css/show.css" type="text/css"?> 


16.2.4 ”运行 结果 


在 浏览 器 中 运行 16-2.xml 文件 ， 页 面 中 就 会 显示 数据 的 内 容 ， 如 图 16-1 所 示 。 


ent\CSS\ 源 代码 \16\16-2- xal - Windows Internet Explorer 
了 :VDocaument\CSS\ 源 代码 \16\16-2. zl 


请 会 同上 wytocmentvss\ 拓 代码 \iavlcrz xml 


电视 机 
1. 三 种 价格 : 


，34 寸 纯 六 1388 允 /全 
，34 寸 数字 高 清 1899 元 /人 台 


" 对 寸 液晶 5999 元 / 台 


2. 生产 日 期 : 2010 年 12 月 
3. 北京 电视 机 厂 生产 


16-1 使 用 CSS 显示 XML 中 的 数据 


16.2.5 ”实例 分 析 


mw, 


在 这 个 实例 的 show.css 样式 文件 中 ， 指 定 了 “TV” 标 记 的 样式 “height:600px:”， 这 样 就 
指定 了 XML 文件 数据 的 显示 区 域 高 为 600 像素 ; 同时 还 指定 了 “background-image:url 
(images/431654.jpg):”， 表 示 XML 文件 数据 显示 区 域 的 背景 图 片 为 “../images/431654.jpg”， 
从 而 在 浏览 器 中 浏览 16-2.xml 文 件 时 ， 出 现 了 如 图 16-1 所 示 的 页 面 效 果 。 
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16.3 在 XML 中 骨 入 CSS 样式 制作 家 电 条 幅 


在 XML 文档 中 引入 CSS 样式 表 有 两 种 方法 , 一 种 是 在 XML 文档 中 引入 外 部 的 CSS 样式 
(前 面 一 节 中 讲 到 的 ); 另 一 种 是 在 XML 文档 中 直接 嵌入 CSS 样式 。 这 节 将 为 大 家 讲解 一 下 如 
何在 XML 文档 中 嵌入 CSS 样式 。 


8 视频 教学 : 光盘 /视频 /16/163 在 XML 中 区 入 CSS 样式 制作 家 电 条 幅 avi @ 长 度 : 7 分 名 


16.3.1 基础 知识 一 一 在 XML 中 嵌入 CSS 样式 


在 XML 中 嵌入 CSS 样式 也 叫 内 嵌 式 ， 就 是 将 CSS 样式 直接 嵌入 XML 文档 内 部 ， 为 元 素 
设置 style 属性 ,并 在 属性 值 中 给 出 对 其 样式 的 定义 。 这 种 用 法 主要 出 现在 一 些 特殊 的 XML 文 
档 中 ， 一 般 来 讲 内 嵌 CSS 样式 的 XML 文档 本 身 就 是 用 于 显示 数据 的 ， 如 SVG、SMIL 等 。 

XML 文档 如 同 内 部 的 DTD 语法 ， 直 接 将 CSS 语法 插入 文件 中 ， 这 并 非 标准 的 用 法 ， 事 
实 上 样式 是 使 用 XHTML 标记 <STYLE> 在 XML 文档 中 插入 CSS 样式 ， 语 法 如 下 : 


<HTML :STYLE xmlns:HTML="http://www.w3.org/1999/xhtml"> 


</HTML :STYLE> 


上 述 代 码 集 声明 了 XHTML 的 命名 空间 代码 HIML，CSS 样式 表 定 义 在 <HTML:STYLE> 
与 </HTML:STYLE> 标 记 之 间 ， 这 样 就 完成 了 在 XML 文档 中 嵌入 CSS 样式 ， 从 而 实现 了 在 浏 
览 器 中 直接 显示 XML 文件 的 文本 内 容 。 


16.3.2 ”实例 描述 


16.2 节 中 ,我 们 在 编辑 好 的 XML 文档 中 引用 外 部 的 CSS 样式 来 完成 家 电 商 场 的 条 幅 展 示 ， 
当时 ,我 们 是 通过 编辑 一 个 XML 文件 和 一 个 CSS 样式 文件 才 完 成 了 在 浏览 器 中 直接 显示 XML 
文件 的 文本 内 容 的 功能 。 其 实 ， 面 对 此 类 比较 简单 的 数据 展示 ， 不 必 “ 大 费 周 折 ”， 直 接 在 
XML 文档 中 嵌入 CSS 样式 就 可 以 了 。 

下 面 就 一 起 来 改编 一 下 家 电 商 场 的 条 幅 展示 功能 吧 ! 


16.3.3 ”实例 应 用 


【 例 16-3】 在 XML 中 艇 入 CSS 样式 制作 家 电 条 幅 
编辑 16-3.xml 文件 ， 在 XML 文档 中 嵌入 CSS 样式 ， 内 容 如 下 : 
<?xml Version="1.0"” encoding="utf-8"?> 
<?xml-stylesheet type="text/css"?> 
<root> 
<HTML: STYLE xmlns:HTML="http://www.w3.0rg/1999/xhtml"> 


< 


/* 和 前 面 讲解 的 使 用 外 部 css 样式 文件 制作 家 电 条 幅 实例 中 的 css 样式 一 样 ， 这 里 不 再 重复 */ 
</HTML: STYLE> 
<TV> 
电视 机 
<price> 
三 种 价格 : 
<iteml>34 寸 纯 平 1388 元 / 台 </iteml> 
<item2>34 寸 数字 高 清 1899 元 / 台 </item2> 
<item3>34 寸 液晶 5999 元 / 台 </item3> 
</price> 
<date> 生 产 日 期 2010 年 12 月 </date> 
<made> 北 京 电视 机 厂 生产 </made> 
</TV> 
</root> 


上 面 代码 中 的 第 三 行 代码 是 CSS 样式 的 声明 ， 其 中 ，xml-stylesheet 的 意思 是 为 XML 文档 
添加 样式 表 ，type= "text/css" 的 意思 是 样式 表 的 类 型 是 CSS 样式 表 。 

代码 中 的 <HTML:STYLE> 是 CSS 样式 内 容 的 开始 标记 ，<HTML:STYLE> 与 
</HTML:STYLE> 之 间 就 是 CSS 样式 内 容 。 


16.3.4 ”运行 结果 


在 浏览 器 中 运行 16-3.xml 文件 ， 出 现 如 图 16-2 所 示 的 界面 。 


， 34 寸 纯 平 1388 却 / 合 
，34 十 笋 宁 高 清 189970 侣 


， 十 液晶 999 元 / 台 


2. 生产 日 期 2010 年 12 月 
3. 北京 电视 机 厂 生产 


16-2 在 XML 文件 中 嵌入 CSS 样式 


16.3.5 ”实例 分 析 


am 


细心 的 同学 不 难看 出 ， 在 这 个 实例 中 , 我 们 只 是 把 前 面 编辑 的 show.css 样式 内 容 复 制 到 了 
<HTML:STYLE> 与 </HTML:STYLE> 标 记 之 间 了 ， 出 现 的 界面 效果 是 一 样 的 。 特 别 需要 注意 的 
是 XML 文件 中 的 这 行 代码 : <?xml-stylesheet type='"textcss"?> 是 不 可 缺少 的 。 


sm > 
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16.4 ”实现 学 生 信 息 的 隔行 变色 功能 


也 许 你 曾经 利用 HTML 的 <table> 数 据 表格 与 CSS 配合 ， 制 作出 了 方便 使 用 的 隔行 变色 表 
格 。 对 于 用 XML 表示 的 数据 ， 同 样 可 以 采用 类 似 的 方法 创建 XML 隔行 变色 表格 。 这 节 将 介 
绍 如 何 使 XML 文档 中 的 数据 表格 实现 隔行 变色 。 


上 视频 教学 : 光盘 /视频 /16/16.4 实现 学 生 信息 的 隔行 变色 功能 .avi @ 长 度 :7 分 钟 


16.4.1 基础 知识 一 一 XML 实现 隔行 变色 的 表格 


前 面 我 们 提 到 过 ， 对 于 XML 文件 ， 样 式 表 中 的 “文本 代表 ”可 以 是 标记 的 名 称 ， 也 可 以 
是 标记 的 名 称 与 该 标记 的 ID 属性 值 用 “# ”连接 起 来 的 字符 串 ， 即 “文本 代表 ”使 用 “标记 名 
称 ”+“#”+“ID 属性 值 ”， 那 么 如 果 需 要 使 XML 文档 数据 内 容 显 示 为 隔行 变色 的 表格 时 ， 
使 用 “标记 名 称 ”+“#”+“ID 属性 值 ”就 显得 很 有 价值 了 。 我 们 完全 可 以 为 相同 的 标记 指定 
不 同 的 ID 属性 值 来 完成 隔行 变色 的 表格 功能 。 
实现 XML 隔行 变色 表格 需要 先 建立 XML 数据 表格 ， 它 与 HTML 中 的 <table> 不 一 样 ， 通 
常 需要 对 不 同类 型 的 单元 格 采用 不 同 的 标记 ， 如 下 面 的 XML 文档 内 容 : 
<title> 
<name> 姓 名 </name> 
<class> 班 级 </class> 
<birth> 出 生日 期 </birth> 
<constel1> 星 座 </constell> 
<mobile> 固 定 电话 </mobile> 
</title> 


上 面 定义 了 表格 的 列 ， 即 表格 的 标题 行 ， 接 着 就 该 为 表格 添加 数据 了 。 在 编辑 表格 数据 的 
XML 时 ， 指 定 偶数 行 的 ID 属性 值 ， 并 且 属 性 值 是 相同 的 ， 如 下 面 的 代码 所 示 : 
<student> 
<!- -指定 第 一 个 学 生 的 姓名 、 班 级 、 出 生日 期 、 星 座 、 固 定 电 话 属 性 值 --> 
</student> 
<student id="stu"> 
<!- -指定 第 二 个 学 生 的 姓名 、 班 级 、 出 生日 期 、 星 座 、 固 定 电 话 属 性 值 --> 


</student> 

在 上 面 代码 中 , 指定 了 偶数 行 的 <student> 标 记 的 ID 属性 值 为 “stu”, 这 样 , 可 以 使 用 “ 标 
记名 称 ”+“#”+“ID 属性 值 ”来 命名 样式 名 称 ， 并 指定 该 样式 名 称 的 样式 规则 ， 从 而 达到 隔 
行 换 色 的 效果 ， 如 下 面 的 CSS 样式 : 


student#stu { 
background-color:#FFCCFEF; /* 隔 行 变色 */ 


} 


< 人 mm 


16.4.2 ”实例 描述 


最 近 在 做 一 个 学 生 管 理 系统 ， 需 要 把 学 生 的 详细 信息 展现 在 表格 中 。 这 对 于 我 们 这 些 程序 
员 来 说 是 最 简单 不 过 的 啦 ， 但 是 ， 不 要 高 兴 得 太 早 ， 我 们 需要 的 学 生 数据 并 非 是 从 数据 库 中 直 
接 读 取出 来 展现 在 页 面 中 的 ， 而 是 需要 先生 成 一 个 XML 文档 ， 然 后 再 展现 。 这 难 倒 了 我 们 公 


司 的 一 大 帮 人 ,不 过 , 程序 员 是 有 一 定 的 “魄力 ”的 , 不 会 让 这 


小 问题 难 倒 。 经 过 深思 熟 虑 ， 


终于 想 出 了 办 法 : 直接 在 XML 文档 中 引用 CSS 样式 就 可 以 实现 表格 的 特效 ， 同 时 ， 我 们 还 可 


以 让 表格 更 加 美观 一 一 隔行 变色 。 下 面 就 来 做 一 下 吧 ! 


16.4.3 ”实例 应 用 


【 例 16-4】 实 现 学 生 信息 的 隔行 变色 功能 
(1) 创建 16-4.xml 文件 ， 定 义 表格 文件 ， 内 容 如 下 : 


<?xml] Version="1.0"” encoding="utf-8"?> 


<?xml-stylesheet href="css/table.css" type="text/css"?> 


<list> 


<!-- 标题 行 数据 --> 


<title> 


<!-- 定义 列 名 为 "姓名 "--> 
<name> 姓 名 </name> 

<!-- 定义 列 名 为 "班级 "--> 
<class> 班级 </class> 

<!-- 定义 列 名 为 "出 生日 期 "--> 
<birth> 出 生日 期 </birth> 
<!-- 定义 列 名 为 "星座 "--> 
<constel1> 星 座 </constell> 
<!-- 定义 列 名 为 "联系 电话 "--> 
<mobile> 联 系 电话 </mobile> 


</title> 
<!-- 设置 表格 的 第 一 行 数据 ， 不 变色 --> 


<student> 


<!-- 指定 "姓名 " 列 的 值 --> 
<name> 王 丽 丽 </name> 

<!-- 指定 "班级 " 列 的 值 --> 
<class> 2 班 </class> 

<!-- 指定 "出 生日 期 " 列 的 值 --> 
<birth> 1988-02-21</birth> 
<!-- 指定 "星座 " 列 的 值 --> 
<conste11> 双 鱼 座 </constel11> 
<!-- 指定 "联系 电话 " 列 的 值 --> 
<mobile>12568487895</mobile> 


</student> 


<!-- 设置 表格 的 第 二 行 数据 ， 变 色 --> 


<student id="stu"> 
<!-- 指定 "姓名 " 列 的 值 --> 
<name> 张 赞 红 </name> 
<!-- 指定 "班级 " 列 的 值 --> 
<class>2 班 </class> 
<!-- 指定 "出 生日 期 " 列 的 值 --> 
<birth>1988-01-24</birth> 
<!-- 指定 "星座 " 列 的 值 --> 
<constell> 双鱼 座 </constell> 
<!-- 指定 "联系 电话 " 列 的 值 --> 
<mobile> 13658478957</mobile> 

</student> 

<!-- 设置 表格 的 第 三 行 数据 ， 不 变色 --> 


<student> 


<!-- 数 据 和 上 面 的 两 行 数据 相同 ， 这 里 不 再 叙述 --> 


</student> 
<!-- 设置 表格 的 第 四 行 数据 ， 变 色 --> 


<student id="stu"> 


<!-- 数 据 和 上 面 的 两 行 数据 相同 ， 这 里 不 再 叙述 --> 


</student> 
<!-- 设置 表格 的 第 五 行 数据 ， 变 色 --> 
<student> 
<name> 杨 芳 </name> 
<class> 1 班 </class> 
<birth>1988-06-07</birth> 
<constel1> 双子 座 </constell> 
<mobile>15478487598</mobile> 
</student> 


</list> 


在 16-4.xml 文件 中 , 定义 的 表格 为 5 列 , 标题 分 别 为 Name、Class、 Birthday、Constellation 
和 Mobile， 并 定义 了 表格 数据 为 4 行 , 同时 定义 了 第 2 行 和 第 4 行 数据 的 ID 属性 值 为 “stu”。 


(2) 新 建 CSS 样式 文件 table.css， 设 置 16-4.xml 文件 内 容 样式 。 
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(3) 在 table.css 样式 文件 中 定义 “list” 标 签 样式 ， 设 置 16-4.xml 文件 中 <list> 与 </list> 之 间 
的 内 容 样式 ， 代 码 如 下 : 


EE 


} 


font-family:Arial; 

Font-size:14px; 

line-height:25px; 
Position:absolute; /* 绝 对 定位 */ 
top:—15px; 

left:0px; 

width:800px; 

height:600px; 


(4) 在 table.css 样式 文件 中 定义 “title” 标 签 样式 ， 设 置 16-4.xml 文件 中 <title> 与 </title> 之 
间 内 容 的 样式 ， 代 码 如 下 : 


< 


[< 开发 学 习 实录 - 


title { 


background-image:url(../images/title bg2.jpg); 


display:block; 
border:lpx solid #0058a3; 
margin:20px Opx Opx Opx; 
padding:0px Opx Opx 20px; 
font-size:18px; 


| 


/* 块 元 素 */ 
/* 边框 */ 
/* 解 决 边框 重 又 的 问题 */ 


(5) 在 table.css 样式 文件 中 定义 “student” 标 签 样式 ， 设 置 16-4.xml 文件 中 <student> 与 


</student> 之 间 内 容 的 样式 ， 代 码 如 下 : 


student { 
display:block; 
background-color:#99CCFF; 
border:lpx solid #0058a3; 
margin-bottom:— lpx; 


h 


/* 块 元 素 */ 
/* 背 景色 */ 
/* 边框 */ 
/* 解决 边框 重合 的 问题 */ 


(6) 使 用 “标记 名 称 ”+“#”+“ID 属性 值 ”实现 隔行 变色 功能 ， 即 在 table.css 样式 文件 
中 定义 “studentfstu” 样 式 内 容 ， 设 置 16-4.xml 文件 中 id 为 “stu” 的 <student> 与 </student> 之 


间 内 容 的 样式 ， 代 码 如 下 : 


student#stu { 


background-color:#0099FE7V* 隔 行 变色 */ 


} 


(7) 设置 表格 标题 样式 ， 代 码 如 下 : 


title name, title class, title birth, title constell, title mobile{ 


color:#FFFFEFF; /* 行 名 称 颜 色 */ 


font-weight:bold; 

text-align:center; 

padding:0 0 0 40; 
} 


(8) 设置 表格 内 容 样式 ， 代 码 如 下 : 


student name student class, student birth,student constell, student mobile { 


padding:0 0 0 50; 
text-align:center; 


1 


(9) 编辑 框架 的 顶部 页 面 header.htm 和 左边 导航 菜单 页 面 menu.htm。 
(10) 创建 index.htm 页 面 ， 将 header.htm 页 面 、menu.htm 页 面 和 16-4.xml 页 面 使 用 框架 


整合 。 


16.4.4 ”运行 结果 


使 用 浏览 器 运行 index.htm 文件 ， 在 页 面 中 输出 一 个 表格 ， 如 图 16-3 所 示 。 
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图 16-3 XML 实现 隔行 变色 的 表格 


16.4.5 ”实例 分 析 


Ba 


在 这 个 实例 中 ， 


16-4.xml 文件 指定 了 偶数 行 的 <student> 标 记 的 ID 属性 值 为 “stu”， 因 此 
可 以 在 table.css 样式 文件 中 编辑 “studentfstu” 的 样式 规则 ， 指 定 背景 色 ， 达 到 了 换 色 的 效果 。 


16.5 ”使 用 XSLT 制作 宠物 展示 页 面 


不 ， 


通过 前 几 节 的 学 习 ， 我 们 已 经 知道 ，XML 注重 的 是 数据 的 结构 ， 并 能 很 好 且 方 便 地 描述 
数据 。 但 是 ， 数 据 的 显示 外 观 也 是 很 重要 的 一 个 方面 ，XML 能 有 效 地 分 离 数 据 结构 和 数据 显 


前 面 提 到 过 ，W3C 为 XML 数据 显示 发 布 了 两 个 建议 规范 : CSS( 层 县 样式 表 ) 和 XSL( 可 扩 
展 样式 语言 )， 那么 ， 这 节 将 为 大 家 讲述 如 何 使 用 XSL 显示 标记 中 的 文本 内 容 。 


已 入 视频 教学 光盘 /视频 /16/16.5 使 用 XSLT 制作 完 物 展示 页 面 .avi 
16.5.1 


全 长度 : 6 分 钟 
基础 知识 一 一 使 用 XSLT 显示 XML 数据 


XSL(eXtensible Stylesheet Language) 主 要 用 来 实现 两 个 作用 : 数据 表达 和 数据 转换 ， 但 是 ， 
数据 转换 部 分 逐渐 地 从 中 独立 出 来 形成 了 一 个 新 的 标准 ， 即 XSLT(eXtensible Stylesheet 
Language Transformation)， 而 数据 表达 部 分 则 形成 了 XSL-FO， 其 中 ，XSLT 是 XSL 标准 中 最 
重要 的 一 个 部 分 。 
1. XSLT 简介 


XSLT 是 为 XML 的 样式 显示 设计 的 语言 ， 该 语言 定义 一 系列 元 素 集 的 XML 的 语法 规范 ， 


< 
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该 语言 规定 可 以 把 XML 文档 转换 成 HTML、XML 或 其 他 的 文档 ， 也 就 是 说 将 一 个 XML 文档 
转换 成 浏览 器 所 能 识别 的 一 种 格式 。 一 个 XSLT 的 样式 表单 中 包含 的 是 多 个 设计 规则 、 显 示 方 
式 ， 从 XML 文档 中 提取 出 来 的 数据 依据 这 个 样式 表单 规定 的 显示 方式 显示 出 来 ， 形 成 一 个 新 
的 文档 。 

XSLT 最 常用 的 转换 是 将 XML 文档 转换 为 HTML 文档 。XSLT 将 每 个 XML 元 素 都 转换 
成 一 个 HTML 元 素 。XSLT 还 可 以 向 输出 文件 中 增加 全 新 的 元 素 , 或 去 掉 一 些 元 素 。 它 可 以 重 
新 安排 这 些 元 素 并 对 元 素 进 行 分 类 ， 测 试 并 确定 显示 哪些 元 素 等 。 

相对 于 CSS 只 支持 英文 的 限制 , XSLT 最 大 的 优点 就 是 文档 可 以 支持 中 文 ， 这 样 可 以 更 加 
适应 用 户 的 编写 习惯 。 而 且 ， 目 前 的 浏览 器 版 本 带 有 XSLT 引擎 的 XML 解析 器 ， 所 以 ， 完 全 
具备 了 对 XSLT 文 档 的 支持 ;用 户 可 以 直接 使 用 Internet Explorer 5.0 或 者 以 上 版 本 来 调试 XSLT 
文档 。 

2. XSLT 转换 


一 个 能 将 XSLT 文件 转换 为 一 个 HTML 文件 的 程序 一 定 具有 处 理 XSL 样式 表 的 功能 ， 比 
如 IE5.5 就 是 具有 这 样 功 能 的 应 用 程序 (IE5.5 带 有 XSL 处 理 器 )。 当 用 浏览 器 打开 一 个 和 XSLT 
样式 表 关 联 的 XML 文件 时 ， 浏 览 器 和 XML 关联 的 XSLT 样式 表 转 换 为 一 个 HTML， 并 执行 
该 HTML 将 数据 显示 在 浏览 器 中 。XSLT 转换 的 基本 步骤 如 图 16-4 所 示 。 


图 16-4 XSLT 转换 的 基本 步骤 
XML 文件 需要 使 用 类 似 下 面 的 操作 指令 将 XML 文件 和 XSLT 样式 表 关 联 : 
<?xml-stylesheet href="xsl 样式 表 的 URL" type="text/xsl"?> 
样式 表 的 URL 如 果 是 一 个 文件 的 名 字 ， 该 文件 必须 和 XML 文件 在 同一 目录 中 ， 例 如 : 
<?xml-stylesheet href="show.xsl” type=”text/xsl”?> 


样式 表 的 URL 如 果 是 一 个 链接 地 址 ， 该 链接 地 址 必须 是 有 效 的 ， 例 如 : 


<?xml-stylesheet href="www.itzcn.com/show.xsl" type="text/xsl"?> 


一 个 简单 的 例子 吧 ! 
创建 16-5.xml 文件 ， 内 容 如 下 : 


<?xml] version="1.0" encoding="utf-8"?> 
< 名 单 > 
< 姓名 > 
张 赞 红 
</ 姓 名 > 
< 出 生日 期 > 
1989 年 02 月 21 日 
</ 出 生日 期 > 
</ 名 单 > 
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假设 XML 文件 16-5.xml 需要 把 标记 的 数据 分 别 用 黑体 1 和 黑体 2 显示 在 浏览 器 中 ， 那 么 
需要 创建 XSLT 文件 ， 内 容 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 


<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.o0rg/1999/xXsL/Transform"> 
<xsl:output method="html" encoding="GBK"/> 
<xsl:template match="/"> 
<HTML> 
Hl1> 
sl:value-of select=" 名 单 /姓名 "/> 
</H1> 
<H2> 
<xsl:value-of select=" 名 单 /出 生日 期 "/> 
</H2> 
<TML> 
</xsl:template> 
</xsl:stylesheet> 


除了 需要 创建 上 面 的 XSLT 文件 之 外 ， 还 需要 在 XML 文档 中 关联 XSLT 文件 。 因 此 ， 需 
要 在 16-5.xml 文件 中 添加 下 面 的 关联 代码 : 

<?xml-stylesheet href="16-5.xsl" type="text/xsl"?> 

用 浏览 器 打开 “16-5.xml” 文 件 的 效果 如 图 16-5 所 示 。 


) ED ”国王 wooeareneVcssNB 人 码 \ievl6-5.zl 


富安 BE WyDoement\css INN6-5 xnl 


张 赞 红 


1989 年 02 月 21 日 


16-5 ”使 用 XSLT 转换 显示 XML 中 的 数据 


16.5.2 ”实例 描述 

本 人 比较 喜欢 宠物 狗 ， 今 天 闲 来 无 事 ， 就 去 网 上 和 逛 了 和 逛 宠物 网 站 ， 宠 物 网 站 就 是 漂亮 ， 各 
种 各 样 的 宠物 在 页 面 上 展现 出 来 真是 美 到 极点 啦 ! 做 程序 员 的 看 网 站 不 是 那么 简单 地 饱 饱 眼福 
就 行 了 ， 还 需要 研究 别人 是 怎么 做 的 ， 于 是 我 将 页 面 保存 下 来 ,研究 了 半天 才 发 现 ， 人 家 是 使 
用 XSLT 将 XML 文档 转换 为 HTML 页 面 来 显示 XML 数据 的 。 下 面 我 们 也 来 试 着 做 一 下 吧 ! 
16.5.3 ”实例 应 用 


【 例 16-$】 使 用 XSLT 制作 宠物 展示 页 面 
(1) 创建 16-6.xml 文件 ， 提 供 宠 物 信息 数据 ， 内 容 如 下 : 


< 人 mm 
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<?xml] Version="1.0"” encoding="utf-8"?> 
< 动物 一 览 表 > 
< 比 能 > 
< 名 称 > 比 能 </ 名 称 > 
< 图 片 >images/1.jpg</ 图 片 > 
</ 比 能 > 
< 贵宾 犬 > 
< 名 称 > 贵宾 犬 </ 名 称 > 
< 图 片 >images/2.jpg</ 图 片 > 
</ 贵 宾 犬 > 
< 山东 狮子 猫 > 
< 名 称 > 山东 狮子 猫 </ 名 称 > 
< 图 片 >images/3.jpg</ 图 片 > 
</ 山 东 狮 子 猫 > 
< 雪 鞋 猫 > 
< 名 称 > 雪 鞋 猫 </ 名 称 > 
< 图 片 >images/4.jpg</ 图 片 > 
</ 雪 鞋 猫 > 
</ 动 物 一 览 表 > 


(2) 创建 XSLT 文件 ， 命 名 为 16-6.xsl。 
(3) 在 16-6.xsl 文件 中 使 用 XSLT 格式 在 页 面 中 生成 表格 ， 在 表格 中 显示 动物 信息 ， 文 件 
内 容 如 下 : 
<?xml] version="1.0" encoding="utf-8"?> 
<xsl:stylesheet Version="1.0" 
xmlns:xsl="http://www.w3.0org/1999/xXsL/Transform"> 
<!-- 设置 动物 图 片 --> 
<xsl:attribute-set name="image"> 
<xsl:attribute name="width">150</xsl:attribute> 
<xsl:attribute name="height">150</xsl:attribute> 
</xsl:attribute-set> 
<!-- 指定 输出 到 页 面 的 编码 方式 为 EBK--> 
<xsl:output method="html" encoding="GBK"/> 
<!-- 根 标记 模式 --> 
<xsl:template match="/"> 
<!-- 指定 背景 色 --> 
<body background="images/5c7db781ad9030aff703a65a.jpg"></body> 
<!-- 使 用 xsl:element 代替 <html> 标 签 --> 
<xsl:element name="html"> 
<xsl:element name="table"> 
<!-- 指 定 table 元 素 的 border 属性 --> 
<xsl:attribute name="border">1</xsl:attribute> 
<!-- 循 环 遍历 "动物 一 览 表 "标记 下 的 元 素 --> 
<xs1:for-each select=" 动 物 一 览 表 "> 
<xsl:apply-templates/> 
</xsl:for-each> 
</xsl:element> 


</xsl:element> 
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</xsl:template> 
<xsl:template match=" 动 物 一 览 表 /*"> 
<xsl:element name="td"> 
<!-- 指定 td 元 素 的 width 属性 --> 
<xsl:attribute name="width">90</xsl:attribute> 
<xsl:value-of select=" 名 称 "/> 
</xsl:element> 
<xsl:element name="td"> 
<!-- 引用 上 面 定 义 好 的 image 标记 属性 --> 
<xsl:element name="image" use-attribute-sets="image"> 
<xsl:attribute name="src"> 
<xsl:value-of select=" 图 片 "/> 
</xsl:attribute> 
</xsl:element> 
</xsl:element> 
</xsl:template> 
</xsl:stylesheet> 


(4) 在 16-6.xml 文档 中 添加 引用 XSLT(16-6.xs]) 文 件 ， 代 码 如 下 : 


<?xml-stylesheet href="16-6.xsl" type="text/xsl"?> 


16.5.4 ”运行 结果 
在 浏览 器 中 打开 16-6.xml 文件 ， 在 页 面 中 以 表格 的 形式 展示 宠物 ， 如 图 16-6 所 示 。 


16-6 ”宠物 展示 


16.5.5 “实例 分 析 


应 源码 解析 : 


在 这 个 实例 中 ， 我 们 使 用 了 XSL 标记 “xsl:element” 来 代替 模板 中 的 html 元 素 ， 使 用 
“xsl:attribute” 来 指定 元 素 的 属性 ; 使 用 <xsl:for-each select=" 动 物 一 览 表 ">” 来 指定 要 循环 的 
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< 人 mm 
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是 “动物 一 览 表 ”下 的 标记 元 素 ; 使 用 “<xsl:template match=" 动 物 一览 表 /*">” 指 定 标记 匹配 
模式 是 “动物 一 览 表 ”标记 下 的 所 有 子 标记 ， 从 而 将 “ 比 熊 ”、“ 焉 宾 厂 ”、“ 山 东 狮 子 猫 ”、“ 雪 
鞋 猫 ” 标 记 中 的 数据 输出 到 表格 中 显示 在 页 面 上 。 


16.6 ”常见 问题 解答 


16.6.1 设置 的 CSS 样式 无 效 的 问题 


设置 的 CSS 样式 无 效 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12278-1-1.html 

我 编辑 了 一 个 CSS 样式 文件 text.css， 设 置 了 一 些 样式 规则 ， 出 现在 页 面 上 的 “NAME1” 
应 该 是 blue，“NAME2” 应 该 是 red， 但是， 出 现 的 字体 颜色 总 是 blue， 我 编辑 的 CSS 样式 文 
件 如 下 所 示 : 

name {font-size:24px;color:blue} 

name #al{font-size:24px;color:red} 

编辑 的 XML 文件 内 容 如 下 所 示 : 


<?xml] version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/css" href="css/text.css"?> 
<student> 

<name>NAME1</name> 

<name ID="al">NAME2</name> 
</student> 


我 仔细 检查 了 一 遍 ， 没 什么 问题 ， 这 是 怎么 回 事 啊 ? 

【解决 办 法 】 仔 细 查 看 CSS 样式 文件 中 的 “name #al1”，“name” 与 “#al” 之 间 有 一 个 
空格 ,这 个 空格 是 不 允许 存在 的 , 如 果 加 空格 的 话 ,XML 解析 器 无 法 解析 你 所 编辑 的 “name #al” 
是 设置 XML 文档 中 的 ID 为 “al” 的 name 标记 ， 而 是 当做 一 个 普通 样式 来 对 待 。 因 此 修改 
CSS 样式 文件 中 的 “name #al” 为 “name#al” 即 可 。 


16.6.2 ”为 什么 还 要 发 展 XML 


为 什么 还 要 发 展 XML? 
网 络 课堂 : http://bbs.itzcn.com/thread-12280-1-1.html 
HTML 已 经 很 流行 了 ， 为 什么 还 要 使 用 XML 来 显示 数据 呢 ? 
【解决 办 法 】 简 单 地 讲 ，HTML 不 能 完成 我 们 希望 XML 完成 的 任务 。 原 因 很 简单 ，XML 
所 要 完成 的 任务 ， 必 须 由 元 置 标 语言 来 完成 ， 而 HTML 只 是 一 个 实例 置 标语 言 。 在 XML 发 布 
之 前 ， 国 际 互联 网 的 发 展 受到 HTML 如 下 几 个 问题 的 束缚 。 


> 
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(1) HTML 无 法 描述 数据 内 容 ， 而 这 一 点 恰恰 是 数据 检索 、 电 子 商务 所 必需 的 。 

(2) HTML 对 数据 表现 的 描述 能 力 是 十 分 不 够 的 ， 如 HTML 还 不 能 描述 矢量 图 形 、 科 学 符 
号 等 对 象 ， 目 前 只 能 通过 图 像 来 表现 这 些 对 象 。 

(3) HTML 实例 置 标语 言 的 地 位 ， 完 全 不 能 适应 对 新 标记 需求 的 发 展 需要 。 

XML 的 出 现 ， 使 上 述 问题 都 得 到 了 很 好 的 解决 。 试 想 在 互联 网 世界 ， 如 果 大 家 都 讲 方言 ， 
互相 交换 信息 时 都 要 进行 翻译 , 那 将 是 一 个 多 么 难以 沟通 和 交流 的 世界 。 在 互联 网 世界 中 ,XML 
之 所 以 重要 ， 恰 恰 是 由 于 它 扮演 了 “国际 语言 ”的 角色 。 此 外 ，XML 还 提供 了 用 于 定义 各 行 
各 业 的 “专业 术语 ”的 工具 。 


16.6.3 ”为 什么 要 使 用 XML 而 不 是 HTML 


为 什么 要 使 用 XML 而 不 是 HTML? 
网 络 课堂 : http://bbs.itzcn.com/thread-12282-1-1 .html 


有 些 情 况 ， 为 什么 要 用 XML 文档 而 不 用 HTML 文档 啊 ? 

【解决 办 法 】 比 较 重 要 的 原因 有 以 下 六 条 。 

(1) 供应 商 能 使 用 XML 设计 自己 的 文档 类 型 ， 而 HTML 只 能 设计 HTML 类 型 的 文档 。 

(2) XML 的 超 文本 链接 能 力 比 HTML 强 得 多 ，XML 提供 的 信息 内 容 比 HTML 更 丰富 ， 
也 更 易于 使 用 。 

(3) XML 能 提供 更 多 更 好 的 机 制 方便 浏览 器 的 信息 表现 和 优化 性 能 。 

(4) XML 舍弃 了 SGML 的 复杂 性 ， 因 此 编写 处 理 XML 的 应 用 程序 会 很 容易 。 

(5) 易于 存储 ， 可 重复 使 用 。 

(6) XML 文件 在 SGML 环境 中 也 可 使 用 ， 不 一 定 要 局 限于 在 Web 中 使 用 。 


16.6.4 XML 如 何 与 数据 库 连接 


XML 如 何 与 数据 库 连 接 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-12284-1-1.html 


在 Web 开发 中 ， 与 数据 库 连 接 是 必然 的 ， 那 么 使 用 XML 如 何 与 数据 库 连 接 啊 ? 

【解决 办 法 】XML 是 一 种 文件 格式 ， 它 没有 规定 与 数据 库 的 连接 方法 ， 你 需要 用 传统 的 
方法 连接 数据 库 ， 进 行 数据 库 查 询 ， 然 后 将 查询 结果 转换 为 XML 格式 。 现 在 有 一 些 工 具 提供 
的 XML 与 数据 库 的 连接 过 程 大 都 遵循 这 样 的 步 又。 下面 是 一 个 利用 ASP 直接 生成 XML 文件 
的 例子 : 


<$%Q@ language="VBScript"%®> 
<?xml version="1.0" encoding="gb2312"?> 


<?xml :stylesheet type="text/xsl" href="..image oster.xsl"?> 
<roster> 
< 


set cConn = Server.CreateObject ("ADODB.Connection") 
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sm >> 


call cCconn -Open ("DSN", "USER", "PWD") 
set rs = cConn.Execute("SELECT DISTINCT * FROM roster") 
Do While Not rs.EOF 


%> 
<Record> 
<Name><%=trim(rs ("name"))%></Name> 
<NativePlace><%=trim(rs ("NativePlace"))%></Nativeplace> 
<Age><%=trim(rs ("Age"))®%></Age> 
<Telephone><%=trim(rs ("Telephone"))%></Telephone> 
</Record> 
<% rs.MoveNext 
Loop 
rs.Close 
set rs=nothing 
set cConn=nothing 
%> 
</roster> 
16.7 习 题 
1. 填空 题 
(1) XML 文档 结构 可 以 分 为 三 个 部 分 : 、 主 体 和 尾声 。 


(2) XML 文档 中 的 主体 就 是 XML 文档 描述 数据 的 地 方 , 通常 由 标记 、 元 素 和 
等 构件 组 成 。 

(3) 下 面 XML 文档 内 容 中 ，< 姓 名 > 是 开始 标记 、</ 姓 名 > 是 结束 标记 ， 而 < 姓名 > 李 赞 红 
</ 姓 名 > 就 构成 了 


<?xml version=”1.0” encoding=”UTF-8”?> 


< 学 生 > 
< 姓名 > 李 赞 红 </ 姓 名 > 
< 性 别 > 男 </ 性 别 > 
< 专业 > 计算 机 </ 专 业 > 
</ 学 生 > 
(4) 在 XML 文 档 中 嵌入 CSS 样 式 需 要 在 标签 的 开始 与 结束 之 间 编 辑 CSS 样式 。 
(5) 一 个 样式 表 的 格式 如 下 : 
文本 代表 
1 
样式 规则 
} 
对 于 XML 文件， 样式 表 中 的 “文本 代表 ”可 以 是 标记 的 名 称 ， 也 可 以 是 5 
(6) XML 文件 需要 使 用 操作 指令 将 XML 文件 和 XSLT 样式 表 关联 。 
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2. 选择 题 


(1) 


(2) 


(3) 


(4) 


(5) 


将 CSS 与 XML 文档 相 联系 的 语法 是 
A. 


<?xml-stylesheet href="xxx.css" type="text/css"?> 
B. 

<?stylesheet href="xxx.css" type="text/css"?> 

所 


<xml-stylesheet href="xxx.css" type="text/css"> 


D. 

<?xml-stylesheet "xxx.css" type="text/css"?> 

XML 文档 中 的 一 个 非 室 元 素 是 由 构成 的 。 

A. 开始 标记 、 结 束 标记 B. 开始 标记 、 结 束 标记 及 两 标记 之 间 的 数据 
C. 标记 D. 标记 之 间 的 数据 

在 XML 文档 中 使 用 CSS 样式 正确 的 方式 为 

A. 引用 式 和 嵌入 式 B. 内 部 和 外 部 

CG: 交 基 列 用 D. 包含 式 


使 用 XSLT 定义 XML 文档 显示 方式 的 基本 思想 是 
A. 通过 定义 转换 模板 ， 将 XML 源 文档 转换 为 带 样式 信息 的 可 浏览 文档 。 
B. 定义 不 同 以 往 的 显示 风格 。 
C.， 控制 XML 文档 显示 数据 的 输出 。 
D. 通过 定义 显示 模板 ， 显 示 指 定 的 XML 数据 。 
XML 文档 中 有 下 面 一 段 代码 : 
<teacher> 
<name id="teal"> 孔 子 </name> 
<name id="tea2"> 老 子 </name> 
<name id="tea3"> 老 舍 </name> 
</teacher> 
假设 需要 把 ID 为 “teal” 的 name 标记 字体 显示 为 红色 ，ID 为 “tea2” 的 name 标记 
字体 显示 为 绿色 , ID 为 “tea3?” 的 name 标记 字体 显示 为 蓝 色 , 则 CSS 样式 怎么 定义 ? 


A, 


name #teal{color:red;} 
name #tea2{color:green;} 
name #tea3{color:blue;} 


B. 


teal{color:red;} 


< 
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tea2{color:green;} 
tea3{color:blue;} 


C. 


name {color:red; 
color:green; 
color:blue; 


} 
了, 


name#teal{color:red;} 
name#tea2{color:green;} 
name#tea3{color:blue;} 


3. 上 机 练习 
上 机 练习 : 设计 笔记 本 推荐 网 页 
要 求 : 


(1) 在 页 面 中 显示 各 个 品牌 (戴尔 、 惠 普 、 三 星 ) 电 脑 的 详细 信息 ， 以 表格 的 形式 展现 在 页 
面 中 。 各 个 品牌 电脑 的 详细 信息 包括 电脑 的 品牌 、 价 格 、 类 型 、CPU、 内 存 大 小 信息 。 

(2) 设置 标题 的 字体 大 小 为 40 像素 、 加 粗 并 居中 显示 ; 设置 表格 背景 色 为 粉色 ， 表 格 居 
左 显示 ， 单 元 格 中 的 字体 为 15 像素 ; 设置 电脑 品牌 字体 为 红色 、 价 格 字体 为 紫色 、 类 型 字体 
为 蓝 色 、CPU 字体 为 绿色 和 内 存 字体 为 深蓝 色 。 

(3) 在 页 面 的 底部 展示 三 张 电 脑 图 片 。 

最 后 的 运行 效果 如 图 16-7 所 示 。 
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16-7 ”笔记 本 推荐 网 页 
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JavaScript 


内 容 摘 要 : 

对 于 传统 的 HIML 语言 而 言 ， 很 难 开发 出 具有 动态 和 交互 性 的 页 面 ， 而 使 用 CSS 除了 可 
以 轻松 设置 网 页 元 素 的 显示 位 置 和 格式 外 ， 甚 至 还 能 产生 滤 镜 ， 图 像 淡 化 ， 网 页 的 淡 入 淡出 的 
渐变 效果 。 同 样 CSS 可 以 实现 的 效果 使 用 JavaScript 也 可 实现 ， 例 如 : 设置 表格 边框 的 颜色 、 
使 用 滤 镜 实现 图 片 的 翻转 等 。 

本 章 将 CSS 与 JavaScript 相 结合 实现 各 种 页 面 的 绚丽 效果 , 例如 : 使 表格 的 边框 变换 颜色 、 
随 着 息 标 浮动 的 文字 、 会 闪 的 图 片 等 。 

学 习 目 标 : 

@ 掌握 如 何 结 合 JavaScript 制作 更 炫 的 表格 边框 
实现 文字 可 以 随和 鼠标 浮动 
了 解 如 何 使 图 片 会 不 断 闪烁 
理解 如 何 使 图 片 翻转 
理解 如 何 实现 文字 可 以 在 页 面 中 舞动 
掌握 如 何 实现 导航 栏 可 收缩 
理解 如 何 实现 表格 会 逐渐 变色 


在 前 面 章节 中 已 经 详细 介绍 过 如 何 为 页 面 元 素 添加 边框 ， 但 前 面 只 是 使 用 CSS 简单 设置 


了 一 下 元 素 边框 的 样式 、 颜 色 。 本 节 通 过 应 用 JavaScript 编程 语言 ， 可 以 使 表格 元 素 的 边框 不 
断 变色 ， 从 而 使 整个 表格 看 起 来 更 加 绚丽 。 


上 视频 教学 : 光盘 /视频 /17/ 17.1 会 变色 的 表格 边框 -avi 回 攻 度 : ;分钟 


17.1.1 实例 描述 


在 上 网 浏览 网 页 时 ， 经 常会 看 到 这 种 效果 : 在 一 些 需要 来 访 者 注意 的 地 方 或 是 该 网 页 的 亮 


点 部 分 会 被 用 高 亮 或 变色 的 边框 框 起 来 。 本 节 实 例 将 实现 这 种 效果 ， 为 了 使 表格 引起 浏览 者 的 
特别 注意 ， 将 表格 的 边框 设置 为 会 变色 的 样式 ， 效 果 非 常 酷 哦 ， 快 来 看 看 吧 。 


17.1.2 ”实例 应 用 


【 例 17-1)】 会 变色 的 表格 边框 
(1) 新 建 一 个 border-color.html 文件 ， 在 该 文件 中 首先 定义 一 个 表格 ， 代 码 如 下 所 示 : 


<table border="0" width="280" id="myexample" style="border:5px solid green" 
align="center"> 
并 站 守 交 
<td> 
<p align="center"> 
Java Script 是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚本 语言 。 
</p> 
</td> 
</tr> 
</table> 


(2) 使 用 JavaScript 脚本 设置 表格 边框 的 颜色 变化 ， 代 码 如 下 所 示 : 


<script language="Java Script"> 
function flashit(){ 
if (!document.all) <!-- 判 断 是 否 是 IE 浏览 器 --> 
return 
if (myexample.style.borderColor=="green") <!-- 判断 当前 表格 边框 的 颜色 
是 否 为 green --> 
myexample.style.borderColor="red" <!-— 当前 表格 边框 颜色 为 green, 将 
表格 边框 设 为 red --> 
else <!-- 否则 的 话 ， 设 为 qrecn’ ===> 


myexample.style.borderColor="green™" 
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setInterval("flashit()"，500) <!-- 每 500 秒 调用 一 次 flashit () 函数 --> 
</script> 


17.1.3 ”运行 结果 


在 正 浏 览 器 中 打开 border-color.html 文件 ， 执 行 效果 如 图 17-1 所 示 。 


会 变色 的 表格 边框 于 
GO Envwess, -= sx 
窜 收 天。 古 全 名和 表格 边 相 健 - 月- 品 罗 -D+ 2 IRV- A- ” 
人 SAJavascript 与 CSS 的 结合 


JavaScnpt 是 一 和 基于 对 家 和 事件 驱动 开具 


图 17-1 会 变色 的 表格 边框 


17.1.4 ”实例 分 析 


应 源码 解析 : 


本 实例 首先 在 页 面 中 定义 了 一 个 表格 ， 并 为 表格 设置 了 边框 ， 初 始 边框 颜色 为 green， 然 
后 通过 JavaScript 脚本 myexample.style.borderColor 设置 边框 的 颜色 为 红色 ,并 通过 判断 当前 边 
框 的 颜色 来 切换 设置 边框 的 颜色 ,最 后 调用 setInterval("flashit0”, 500) 函 数 ， 每 500 秒 调用 一 次 
flashitO) 函 数 。 这 样 会 变色 的 表格 边框 就 形成 了 。 


17.2 ” 随 着 鼠标 浮动 的 文字 


在 网 上 看 到 很 多 鼠标 特效 ， 后 来 才 知 道 这 些 特效 可 以 采用 JavaScript 来 实现 ， 就 研究 了 一 
下 。 本 节 就 演示 一 下 我 的 收获 ， 共 同学 习 实现 文字 随 鼠 标 浮动 的 效果 。 


< 全 ——— 


视频 教学 : 光盘 /视频 /17/17.2 ” 随 着 鼠标 浮动 的 文字 .avi i 


17.2.1 实例 描述 


前 天 在 浏览 一 个 朋友 的 博客 时 发 现 ， 鼠 标 后 面 会 跟着 浮动 一 些 文字 ， 看 起 来 很 炉 ， 现 在 自 
己 也 实现 了 这 种 炫 的 鼠标 特效 ， 就 拿 出 来 与 大 家 分 享 一 下 。 通 过 本 实例 的 学 习 ， 要 求 读者 掌握 
这 种 鼠标 特效 的 实现 原理 。 


17.2.2 ”实例 应 用 


【 例 17-2】 随 着 鼠标 浮动 的 文字 

新 建 一 个 text-font.html 文件 ， 在 该 文件 中 定义 一 段 文 本 ， 设 置 一 下 文本 的 字体 、 颜 色 ， 并 
使 该 文本 可 以 随 着 鼠标 浮动 ， 代 码 如 下 所 示 : 

<script language="Java Script"> 


if (document.all) 


{ 


yourLogo = "圣诞 节 快乐 ! ! ! "; <!-- 待 浮动 的 文字 --> 
LogoFont = "Arial"; <!-- 文 字 的 字体 --> 
LogoColor = "red"; <!-- 文 字 的 颜色 --> 
YourLogo = YourLogo.split(" 7") 7 <!-- 将 浮动 的 字符 串 分 成 单个 的 字符 --> 
工 = yourLogo.length; <!-- 获 得 字符 串 的 长 度 --> 
Trigsplit = 360 / L; <!-- 设 置 每 次 旋转 的 角度 --> 
Sz = new Array() <!-- 声 明 一 个 数组 --> 
LogoWidth = 100; <!-- 定 义 宽度 --> 
LogoHeight = -30; <!-- 定 义 高 度 --> 

Ypos = 0; 

xpos = 0; 

step = 0.03; <!-- 定 义 步 长 --> 


currSstep = 0; 
document .write('<div id="outer™" 
style="position:absolute;top:0px;left:0px"><div 
style="position:relative">'); 
ol & 3 1 WE 5) | 
{ 
document .write('<div id="ie" 
style="position:absolute;top:0px;left:0px;'+'width:10px; 


height:10px;font-family:'+LogoFont+';font-size:12px;'+'color:'+LogoColor+'; 
text-align:center">'+yourLogo[i]+'</div>'); <!-- 依 次 显示 每 一 个 字符 --> 
E 
document .write('</div></div>"'); 
function Mouse() 
{ 
ypos = event.y; <!-- 获 得 当前 鼠标 的 纵 坐 标 --> 


> >> 
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Xpos = event.x — 5; <!-- 获 得 当前 鼠标 的 横 坐 标 --> 
} 
document .onmousemove=Mouse; <! 一 -鼠标 移动 后 调用 mouse 函数 --> 
function animateLogo() 
{ 
<!-- 获 得 当前 窗口 的 坐标 --> 
outer.style.pixelTop = document .body.scrollTop; 
for (i= 0; i < L; i++) 


4 
ie[i]l.style-top = ypos + LogoHeight * Math.sin(currStep + i* 
Trigsplit * Math.PI / 180); <!-- 获 得 第 i 个 字符 的 上 边界 --> 
ie[i]l.style.left = xpos + LogoWidth * Math.cos(currStep +i* 
TrigSplit * Math.PI / 180); <!-- 获 得 第 工 个 字符 的 左边 界 --> 
Sz[i] = ie[i].style.pixelTop - ypos; <!-- 设 置 字体 --> 
TE (SZ < 0 sz 5 <!-- 设 置 字体 --> 
ie[i]l.style.fontSize = Sz[i] / 1.7; <!-- 当 前 字体 的 变化 --> 

} 

currStep -= step; 


setTimeout ('animateLogo()', 20); <!-- 动 画 的 实现 --> 
} 
window.onload = animateLogo; <!-- 直 接 调 用 animateLogo 函数 --> 


} 
</script> 


17.2.3 ”运行 结果 


在 下 浏览 器 中 运行 text-font.html 文件 ， 执 行 效果 如 图 17-2 所 示 。 
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17.2.4 实例 分 析 


应 源码 解析 : 


首先 定义 浮动 文字 的 内 容 、 字 体 、 字 体 颜 色 ， 并 将 浮动 的 字符 事 分 成 单个 的 字符 ， 获 得 字 
符 串 的 长 度 。 设置 字符 每 次 旋转 的 角度 、 宽 度 和 高 度 。 

然后 使 用 JavaScript 脚本 将 定义 好 的 文本 放 到 div 元 素 中 ， 并 显示 在 页 面 中 ， 还 定义 了 一 
个 获取 鼠标 坐标 的 函数 Mouse0， 当 鼠标 移动 时 触发 document.onmousemove 指定 的 Mouse0) 函 
数 , 通过 得 到 的 和 鼠标 坐标 来 设置 字符 显示 的 位 置 。 并 且 通 过 setTimeout(animateLogo0'" 20) 函 数 
每 20 秒 调 用 一 次 animateLogo0 函 数 。 

最 后 指定 window.onload=animateLogo(), 打开 窗口 直接 执行 animateLogo(0) 函 数 。 这 样 就 实 
现 了 文字 随 鼠 标 浮动 的 效果 。 


17.3 会 闪 的 图 片 


有 很 多 使 用 CSS 来 实现 的 样式 , 实际 上 使 用 JavaScript 也 可 以 实现 , 本 节 将 使 用 JavaScript 
脚本 语言 来 设置 图 片 的 显示 与 隐藏 属性 ， 使 图 片 一 隐 一 现 闪烁 起 来 吧 。 


= 视频 教学 : 光盘 /视频 /17/17.3 会 闪 的 图 片 .avi 四 长 度 : 3 分 钟 


17.3.1 实例 描述 


刚 在 网 上 商城 选 了 一 圈 ， 看 到 有 些 商品 的 图 片 特效 做 得 相当 不 错 ， 就 想 做 一 些 图 片 特效 放 
到 自己 的 博客 中 。 最 后 ， 就 实现 了 本 文 所 介绍 的 图 片 不 停 闪烁 的 特效 。 放 到 博客 上 之 后 ， 为 我 
的 博客 吸引 了 不 少 浏览 者 ， 大 家 也 来 试 试 吧 。 


17.3.2 ”实例 应 用 


【 例 17-3】 会 闪 的 图 片 
(1) 新 建 一 个 picture.html 文件 ， 在 该 文件 中 定义 一 个 div 元 素 ， 并 包含 一 个 精美 图 片 ， 代 
码 如 下 所 示 : 

<body onLoad="pictureOnload()" topmargin="0"> 

<div id="picture" > 

<img src="pic files/1265627301 1444lce9.jpg" > 

</div> 

</body> 


(2) 使 用 JavaScript 脚本 语言 设置 图 片 的 visibility 属性 ， 使 图 片 一 隐 一 现 ， 这 样 图片 就 闪 
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全 JavaScript 上 


起 来 了 ， 代 码 如 下 所 示 : 
<script language="Java Script"> 


var ms = 800; // 定 义 一 个 时 间 
var counter = 0; // 统 计 变量 


function pictureOnload() { 


setTimeout ("style fun()", ms); 


} 

function style fun() { 
picture.style.visibility = 
(picture.style.visibility == "hidden") ? "visible"”: "hidden"7 


// 判 断 并 设置 图 片 的 visibility 属性 
counter +=1; 


setTimeout ("style fun()", ms); 


// 每 800 秒 调用 一 次 style_fun () 函数 
} 


</script> 


17.3.3 ”运行 结果 


在 正 浏 览 器 中 运行 picture.html 文件 ， 执 行 效果 如 图 17-3 所 示 。 
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17.3.4 ”实例 分 析 


Ce 


本 实例 首先 在 页 面 中 定义 一 个 包含 图 片 的 div 元 素 。 然 后 使 用 JavaScript 脚本 判断 图 片 的 
visibility 属性 是 否 为 hidden。 如 果 为 hidden 表示 当前 图 片 为 隐藏 状态 , 将 图 片 的 visibility 属性 
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设 为 visibleg， 使 图 片 显示 出 来 ， 否 则 的 话 ， 将 图 片 设 为 hidden 隐藏 状态 。 最 后 用 
setTimeout("style fun0", ms) 每 800 秒 调用 一 次 style fun0 函 数 ， 这 样 图 片 就 出 现 了 闪烁 的 效果 。 


17.4 图 片 翻 转 


前 面 章节 已 经 介绍 了 如 何 使 用 滤 镜 制作 一 些 特殊 效果 ， 实 际 上 使 用 JavaScript 也 完全 可 以 
实现 滤 镜 的 这 些 效果 ， 本 节 将 使 用 JavaScript 脚本 语言 来 实现 图 片 翻转 的 功能 。 


各 视频 教学 : 光盘 /视频 /17/17.4 图 片 翻转 .avi 鲜 长 度 : 4 分 名 


17.4.1 实例 描述 


好 久 没 有 进 过 论坛 了 ， 利 用 午休 时 间 去 看 看 吧 。 到 论坛 中 一 看 又 有 不 少 求助 的 帖子 ， 突 然 
看 到 有 人 问 如 何 使 用 JavaScript 实现 图 片 翻转 的 效果 。 正 好 本 人 研究 过 这 个 东西 ， 就 帮 他 实现 
了 一 个 可 以 水 平和 垂直 翻转 图 片 的 实例 ， 今 天 也 借 此 机 会 和 大 家 一 起 分 享 一 下 吧 。 


17.4.2 ”实例 应 用 


【 例 17-4】 图 片 翻转 
(1) 新 建 一 个 reverse.html 文件 ， 在 该 文件 中 定义 一 个 图 片 元 素 和 一 个 form 表单 元 素 ， 通 
过 单 击 表单 按钮 ， 将 图 片 进行 水 平 翻转 和 垂直 翻转 ， 代 码 如 下 所 示 : 


<body> 
<div ><img src="4.gif" id="obj"></div> 
<form id="flip form" name="flip form"> 
使 用 滤 镜 实现 图 片 翻转 效果 : 
<input type="button"” value=" 水 平 翻转 " onclick="setFliph()"> 
<input type="button" value=" 垂 直 翻 转 " onCclick="setFlipv() "> 
</form> 
</body> 


(2) 使 用 JavaScript 脚本 实现 滤 镜 翻转 图 片 的 效果 ， 代 码 如 下 所 示 : 


<script language="Java Script"> 
function setFliph(){ 
obj.style.filter=obj.style.filter=="fliph"?"":"fliph"; 
// 设 置 obj 的 filter 样式 为 f1iph， 水 平 翻转 图 片 
1 
function setFlipv(){ 
obj.style.filter=obj.style.filter=="flipv"?"":"flipv"; 
// 设 置 obj 的 filter 样式 为 fl1ipv， 垂 直 翻转 图 片 
| 
</script> 
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在 正 浏 览 器 中 运行 reverse.html 文件 , 可 以 看 到 图 片 下方 有 两 个 按钮 , 分 别 是 “水 平 翻 转 ” 
和 “垂直 翻转 ”， 当 单 击 “ 水 平 翻转 ”按钮 时 ， 图 片 水 平 翻转 ， 执 行 效果 如 图 17-4 所 示 。 


17.4.3 ”运行 结果 
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图 17-4 ”水平 翻转 
单 击 “ 垂 直 翻 转 ” 按 钮 时 ， 图 片 进 行 乖 直 翻转 ， 执 行 效果 如 图 17-5 所 示 。 
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17.4.4 ”实例 分 析 


Sm, 


本 实例 首先 在 reverse.html 页 面 中 定义 了 一 个 包含 img 元 素 的 div， 然 后 定义 了 一 个 form 
表单 元 素 ， 该 表单 元 素 包含 两 个 按钮 ， 用 来 控制 图 片 进行 翻转 ， 分 别 是 “水 平 翻转 ”和 “垂直 
翻转 ”。 


< 
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最 后 定义 了 两 个 函数 , 在 setFliphO 函 数 中 设置 obj( 即 指 图 片 id) 的 filter 样式 为 fliph 使 图 片 
水 平 翻转 ，setFilpvO 函 数 中 设置 obj 的 filter 样式 为 flipv 使 图 片 重 直 翻 转 。 这 两 个 函数 分 别 为 
“水 平 翻转 ”和 “垂直 翻转 ”按钮 的 单 击 触发 事件 函数 。 


17.5 ”舞动 的 文字 
一 些 绚丽 的 效果 仅仅 使 用 CSS 常常 是 无 法 实现 的 ， 比 如 本 节 要 实现 文字 在 页 面 中 舞动 的 
效果 。 但 是 ， 如 果 结 合 JavaScript 脚本 进行 实现 ， 那 么 就 简单 多 了 。 
< 视频 教学 : 光盘 /视频 /17/17.5 ”舞动 的 文字 .avi 加 长 度 : 4 分 钟 


17.5.1 实例 描述 


经 常 上 网 的 人 应 该 看 到 过 很 多 网 页 文字 特效 ， 例 如 : 跑马 灯 、 文 字 短 直 滚动 、 从 页 面 顶 部 
落下 等 。 本 节 实 例 将 演示 文字 在 页 面 中 舞动 的 效果 。 


17.5.2 ”实例 应 用 


【 例 17-5】 舞 动 的 文字 

(1) 新 建 一 个 HTML 文件， 命名 为 text_dance.html， 定 义 在 该 文件 中 显示 的 文字 内 容 、 字 
体 、 字 号 、 颜 色 等 ， 设 置 文字 在 浏览 器 中 显示 的 各 个 边界 ， 还 需 初始 化 每 个 字符 的 x、y 坐标 ， 
以 及 文字 在 页 面 显 示 的 格式 。 代 码 如 下 所 示 : 


<script> 

var your_message=" 新 年 快乐 ! ! ! " <!-- 显 示 文 字 的 内 容 --> 

Var textfont="Verdana" <!-- 显 示 字 体 --> 

Var textsize=20 <!-- 显 示 字号 --> 

Var textcolor="red" <!-- 颜 色 设 定 --> 

Var textboldness=15 <!-- 字 体 粗细 --> 

var tempo=200 <!-- 延 时 长 短 --> 

Var stepx=20 <!- -移动 的 步 长 ， 分 水 平和 垂直 方向 的 --> 


var stepy=15 
Var msg=new Array() 


Var msg=your message <!-- 将 要 显示 的 内 容 赋 给 msg--> 
Var message=msg.split("") <!-- 将 msg 在 空格 处 拆 分 --> 
Var numberofletters=msg.length-1 <!-- 字 符 的 个 数 --> 

Var xX,y 

var marginbottom <!-- 浏 览 器 的 底部 --> 

var marginleft=0 <!-- 浏 览 器 的 左边 界 --> 

var margintop=0 <!-- 浏 览 器 的 顶部 --> 

var marginright <!-- 浏 览 器 的 右边 界 --> 
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textboldness=textboldness*100 <!-- 字 体 粗细 设 定 --> 

Var timer <1== 计 时 -> 

Var xpos=new Array() <1!-- 横 、 纵 坐标 --> 

Var ypos=new Rrray() 

Var spancontent=new Array() <!-- 要 显示 的 内 容 ， 包 括 格式 的 设 定 --> 

for (i=0; i<=numberofletters;i++) { <!-- 初 始 化 ， 每 个 字符 的 x、y 坐标 均 为 0--> 
xpos[i]=0 
Ypos [i]=0 


for (i=0;i<=numberofletters;i++) { <!-- 按 照 指定 的 格式 显示 字符 文字 --> 
spancontent [i]="<span 
style='position:relative;font-family:"+textfont+";font-size:"+ 
textsizet+"pt;color:"+textcolor+";font-weight:"+textboldnesst+"'>"+ 
message [i]+"</span>" 
} 
</script> 


(2) 定义 一 个 获取 随机 数 的 函数 randommaker0, 用 于 更 新 文字 移动 的 步 长 , 代码 如 下 所 示 : 


<script> 
function randommaker (ange) { <!-- 产 生 随机 数 --> 
rand=Math.floor (ange*Math.random() ) 
return rand 
} 
</script> 


(3) 定义 checkposition0 函 数 ， 用 于 控制 文字 移动 不 超出 浏览 器 的 边界 ， 代 码 如 下 所 示 : 


<script> 
function checkposition() { 
if (document.all) { <!-- 如 果 是 IE 浏览 器 --> 
if (document.all.span0.style.posLeft>marginright) { 
<!-- 如 果 位 置 超出 右边 界 --> 
stepx= (stepx+randommaker (2))*-1 <!-- 更 新 横 坐标 步 长 值 --> 
document .al1.span0.style.posLeft-=1 <!--posLeft 减 1--> 


if (document.all.span0.style.posLeft<marginleft) { 
<!-- 如 果 位 置 超出 左边 界 --> 
stepx= (stepxt+randommaker (2) )*-1 <!-- 更 新 横 坐标 步 长 值 --> 
document .al1.span0.style.posLeft+=1 <!--posLeft 加 1--> 
UL 
if (document.all.span0.style.posTop>marginbottom) { 


<!-- 如 果 位 置 超过 底部 --> 
stepy= (stepy+randommaker (2) ) *-1 <!-- 更 新 纵 坐 标 步 长 值 --> 
document .all.span0.style.posTop-=1 <!--posTop 减 1--> 
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if (document .all.span0.style.posTop<margintop) { <!-- 如 果 位 置 超出 顶部 --> 
stepy= (stepy+randommaker (2) ) *-1 <!-- 更 新 纵 坐 标 步 长 值 --> 
document -al1.span0.style-posTop+=1 <!--posTop 加 1--> 


} 


</script> 


(4) 定义 使 文字 移动 的 函数 moveball0， 在 该 函数 中 调用 checkposition0 函 数 检查 文字 位 置 
是 否 超出 边界 ， 并 给 予 必要 的 调整 ， 然 后 调用 makesnake0 〇 函数 使 文字 移动 飞舞 起 来 ， 代 码 如 
下 所 示 : 


<script> 
function moveball() { <!-- 使 文字 移动 的 函数 --> 
if (document .al1l) 1{ <!-- 如 果 是 IE 浏览 器 --> 
checkposition() 
<!-- 调 用 checkposition 函数 ,检查 位 置 并 给 予 必要 的 调整 --> 
makesnake () <!-- 调 用 makesnake 函数 --> 
document .all .span0.style.posTop+=stepy 
<!-- 改 变 垂直 方向 上 的 位 置 值 --> 


timer=setTimeout ("moveball ()",tempo) <!-- 延 时 40ms--> 


function makesnake() { 
for (i=numberofletters; i>=]1; i--) { 
<!-- 循 环 ， 使 得 第 i 个 字符 占据 第 i 一 1 个 字符 的 位 置 --> 
xpos [i]=xpos [i-1] 
ypos [i]=ypos [i-1] 
} 
if (document.all) { <!-- 如 果 是 IE 浏览 器 --> 
xpos [0]=document .all.span0.style.posLeft+stepx 
<!-- 确 定 第 1 个 字符 的 位 置 --> 
Ypos [0]=document .al1.span0.style.posTop+stepy 
for (i=0;i<=numberofletters;i++) { <!-- 对 于 每 个 字符 --> 
Var thisspan=eval ("document .all.span"+(i)+".style") 
thisspan.posLeft=xpos [i] 
<!-- 将 更 新 后 的 x、Y 坐标 赋 给 thisspan--> 
thisspan.posTop=ypos [i] 


} 
</script> 


(5) 定义 setValues0 函 数 ， 使 页 面 执 行 时 ， 文 字 延 时 2 秒 钟 出 现 。setValues20 函 数 设 定 文 
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字 在 浏览 器 中 显示 的 底 边 和 右边 ， 并 将 文字 初始 显示 位 置 设 为 页 面 的 左上 角 ， 代 码 如 下 所 示 : 


<script> 
function setValues() { <1!1-- 设 定 延 时 为 2s--> 


Var firsttimer= setTimeout ("setValues2()",2000) 


function setValues2() { 
if (document.all) { <!-- 如 果 是 IE 浏览 器 --> 
marginbottom = document .body.clientHeight-5; 
<!-- 设 定 显示 的 底 边 和 右边 --> 
marginright = document .body.clientWidth-5 
for (i=0;i<=numberofletters;i++) { 
Var thisspan = eval ("document .all.span"+i) 
thisspan.innerHTML=spancontent [i] 
<!-- 将 spancontent 的 值 返回 给 thisspan--> 
Var thisspan = eval("document.all.span"+(i)+".style") 
thisspan.posLeft=0 <!-- 将 位 置 确定 为 左上 角 --> 
thisspan.postop=0 
} 


moveball () <! 一 -文字 开始 移动 --> 
} 
} 
</script> 
(6) 通过 for 循环 在 页 面 中 显示 定义 的 文字 内 容 ， 代 码 如 下 所 示 : 
<script> 
for (i=0;i<=numberofletters;i+t+) { <!-- 显 示 上 面 定义 的 字符 串 --> 
document .write("<span id='span"+i+""' 
style='position:absolute'></span>") 
document .close () <!-- 关 闭 显示 --> 
1 
</script> 


(7) 将 setValues0 函 数 设置 加 载 到 body 元 素 上 ， 使 文字 在 整个 body 中 舞动 显示 ， 代 码 如 
下 所 示 : 


<body onload=setValues () > 
</body> 


17.5.3 ”运行 结果 


在 正 浏览 器 中 运行 text_dance.html 文件 ， 可 以 看 到 “新 年 快乐 ! ! ! ”文字 在 页 面 中 舞 
动 ， 执 行 效果 如 图 17-6 所 示 。 


< 全 —— 


全 开发 学 习 实录 - 尼 


文 宁 在 页 面 中 年 动 一 


很 高 兴 倾听 用 户 的 来 电 


电话 0567 4989 5676 
Emal ne@companycom 
二 让 -Abraham St 078 Aabama 


六 39 电 应 
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17.5.4 ”实例 分 析 


> 


本 实例 首先 定义 了 在 页 面 中 显示 的 文字 内 容 、 字 体 、 左 色 等 变量 。 定义 获取 随机 数 的 函数 
randommaker() 用 于 更 新 文字 移动 的 步 长 。 定 义 文字 移动 的 函数 moveball()， 在 该 函数 中 调用 
checkposition() 函 数 检查 文字 位 置 是 否 超出 边界 ， 通 过 makesnake() 函 数 使 文字 舞动 起 来 。 最 后 
调用 setValues0 〇 函数 使 页 面 执 行 时 ， 文 字 延 迟 2 秒 钟 出 现 ， 并 且 设 定 文字 初始 显示 位 置 在 页 面 
的 左上 角 。 这 样 “新 年 快乐 ! ! ! ”这 几 个 文字 就 在 页 面 中 舞动 起 来 了 。 


17.6 会 收缩 的 导航 栏 


用 JavaScript 实现 一 个 网 页 特效 实在 是 太 方便 了 ， 本 节 我 们 就 使 用 JavaScript 来 实现 一 个 
会 收缩 的 导航 栏 ， 为 我 们 的 页 面 增光 添彩 ， 而 且 使 用 也 非常 方便 。 


上 视频 教学 ;光盘 /视频 /17117.6 会 收缩 的 导航 栏 avi Ok 度 : 4 分 名 
17.6.1 实例 描述 


大 家 一 定 见 过 有 些 网 站 上 的 导航 栏 是 可 收缩 的 ， 这 样 既 可 以 节省 空间 ， 又 可 使 页 面 显示 的 
内 容 更 丰富 一 些 。 但 这 个 功能 具体 是 如 何 实现 的 呢 ? 本 节 实 例 将 演示 它 的 具体 实现 过 程 。 


me >> 
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17.6.2 ”实例 应 用 


【 例 17-6】 会 收缩 的 导航 栏 
(1) 新 建 一 个 HTML 文件 navigation.html， 在 该 文件 中 定义 一 个 div 元 素 ， 在 该 元 素 中 设 
置 CSS、Java、Spring 等 链接 ， 形 成 一 个 导航 菜单 ， 代 码 如 下 所 示 : 


<body> 
<div id="divMenu" style="position: absolute; top: 10; left: 40; width: 173; 
visibility: hidden; background-color:#CF9; height: 19"><nobr> 
<a href="http://www.cssmania.com/">CSs</a>-— 
<a href="http://www.java.com/zh_ CN/">Java</a>- 
<a href="http://www.springsource.org/">Spring</a>- 
<a href="http://www.hibernate.org/">Hibernate</a>- 
<a href="http://www.Java Script.com">Java Script</a> 
--- <a style="background-color: yellow; text-decoration: none" 
href="Java Script://"” onclick="moveMenu () "> 技术 导航 菜单 </a></nobr> 
</div> 
</body> 


(2) 使 用 JavaScript 脚本 声明 定义 了 菜单 移动 的 频率 、 移 动 速度 等 ， 代 码 如 下 所 示 : 


<script language="Java Script"> 


IE=document .all <!--IE 的 标志 --> 
lshow=60 
Var move=10; <!-- 菜单 移动 的 频率 --> 
menuSpeed=40 <!-- 菜单 移动 的 速度 为 40 秒 一 次 --> 
Var moveOnscroll=true 
Var tim; 
Var ltop; 
</script> 


(3) 定义 一 个 b_getleftO 函 数 用 于 获取 菜单 的 左边 界 ， 代 码 如 下 所 示 : 


function b getleft(){ 
var gleft=eval (this.css.pixelLeft); <!-- 获 取 菜 单 的 左边 界 --> 
return gleft; 

} 


(4) 定义 makeMenu0 函 数 生成 导航 菜单 ， 并 设置 菜单 的 状态 、 宽 度 等 ， 调 用 b_getleft0 函 
数 设置 菜单 左边 界 等 ， 代 码 如 下 所 示 : 


<script> 
function makeMenu (obj,nest){ 
this.css=eval (obj+' .style') <!-- 生 成 菜单 --> 
this.state=1 <1-- 设 置 菜单 的 状态 --> 
this -go=0 <!-- 设 置 菜 单 的 属性 --> 
this.width=eval (obj+'-offsetWidth') <!-- 设 置 菜 单 宽度 --> 
this.left=b getleft <!-- 设 置 菜 单 左边 界 --> 


this.obj = obj + "Object"; 


< 人 mm 
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eval (this.obj + "=this") 


1 
</script> 
(5) 定义 收回 菜单 函数 mm0， 弹 出 菜单 函数 mOut0， 代 码 如 下 所 示 : 
<script> 
function mIn(){ <!-- 收 回 菜单 --> 
if(oMenu.left()>-oMenu.width+lshow){ 
oMenu.go=1 <!-- 设 置 标志 位 ， 表 示 菜 单 在 运动 中 --> 
oMenu.css.left=oMenu.left () -move <!-- 每 次 菜单 的 左边 界 向 左 移动 一 个 值 --> 
tim=setTimeout ("mIn()",menuSpeed) <! 一 -设置 移动 的 速度 --> 
}else{ 
oMenu.go=0 <!-- 设 置 标志 位 ， 表 示 菜 单 不 在 运动 中 --> 
oMenu.state=1 <!-- 设 置 标志 位 ， 表 示 菜 单 已 经 收回 --> 
1 
} 
function mout (){ <!-- 弹 出 菜单 --> 
if(oMenu.left()<0){ 
oMenu.go=1 <!-- 设 置 标志 位 ， 表 示 菜 单 在 运动 中 --> 
oMenu.css.left=oMenu.left()+move <!-- 每 次 菜单 的 左边 界 向 右 移动 一 个 值 --> 
tim=setTimeout ("mOut () ",menuSpeed) <!-- 设 置 移 动 的 速度 --> 
}elset <!-- 菜 单 弹出 完毕 --> 
oOMenu .go=0 <!-- 设 置 标志 位 ， 表 示 菜 单 不 在 运动 中 --> 
oMenu.state=0 <!-- 设 置 标志 位 ， 表 示 菜 单 已 经 弹出 --> 


} 


(6) 定义 moveMenu0 函 数 判 断 当 前 菜单 的 状态 , 如 果 为 已 弹出 , 清除 定时 器 并 将 菜单 收回 ， 
如 果菜 单 示 弹出， 同样 先 清除 定时 器 ， 再 将 菜单 弹出 ， 代 码 如 下 所 示 : 


<script> 
function moveMenu(){ 
if(!oMenu.state){ <!-- 如 果菜 单 已 经 弹出 --> 
clearTimeout (tim) <!-- 清 除 定时 器 --> 
mIn() <!-- 将 菜单 收回 --> 
}elset <!-- 如 果菜 单 未 弹出 --> 
clearTimeout (tim) ”<!-- 清 除 定时 器 --> 
mout () <! 一 -将 菜单 弹出 --> 
} 
} 
</script> 


(7) 定义 menulInit0 函 数 ， 调 用 makeMenu() 函 数 生成 菜单 ， 设 置 菜单 的 左边 界 ， 并 将 菜单 
设置 为 可 视 状 态 ， 代 码 如 下 所 示 : 


<script> 
function menuInit(){ 
oMenu=new makeMenu('divMenu') <!-- 生 成 菜单 --> 
oMenu.css.left=-oMenu.width+lshow <!-- 设 置 菜单 的 左边 界 --> 
oMenu.css.visibility='visible' <!-- 将 菜单 设置 为 可 视 --> 


sm >> 
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} 
</script> 


(8) 定义 在 页 面 载 入 时 调用 menuInit0 函 数 ， 显 示 导 航 菜单 栏 ， 代 码 如 下 所 示 : 


<script> 
onload=menuInit; <!-- 页 面 载 入 时 ， 直 接 调 用 函数 menuInit--> 


</script> 


17.6.3 ”运行 结果 


在 正 浏 览 器 中 运行 navigation.html 文件 ， 执 行 效果 如 图 17-7 所 示 。 


17-7 会 收缩 的 导航 栏 


17.6.4 ”实例 分 析 


Ss 源码 解析 : 


本 实例 首先 在 页 面 中 定义 了 一 个 div 元 素 ， 并 在 该 元 素 中 定义 了 几 个 链接 形成 一 个 导航 菜 
单 。 然 后 定义 菜单 移动 的 频率 、 速 度 等 变量 ， 通 过 定义 makeMenu0) 函 数 生 成 导航 菜单 ， 并 调 
用 b_getleftO 函 数 设置 菜单 左边 界 ， 还 定义 了 moveMenu() 函 数 ， 该 函数 通过 调用 mIn() 函 数 收 
回 菜单 ， 调 用 mOutO 函 数 弹 出 菜单 。 最 后 定义 在 页 面 载 入 时 执行 menuInitO 函 数 ， 生 成 菜单 导 
航 栏 ， 并 将 菜单 栏 设置 为 可 视 ， 和 鼠标 单 击 该 菜单 栏 会 收缩 。 


17.7 ”逐渐 变色 的 表格 


如 果 需 要 在 页 面 中 展示 一 些 数据 ， 使 用 表格 非常 方便 ， 但 使 用 标准 的 HIML 语言 生成 的 
表格 十 分 简单 ， 而 且 也 不 美观 ， 而 使 用 CSS 也 只 能 为 表格 添加 一 些 基 本 的 外 观 样式 ， 本 节 将 


< 多 


结合 使 用 JavaScript 实现 动态 改变 表格 的 颜色 。 
< 视频 教学 : 光盘 /视频 /17/17.7 逐渐 变色 的 表格 .avi @@ 长 度 : 4 分 名 


17.7.1 实例 描述 


最 近 在 制作 一 个 新 闻 管 理 网 站 ， 常 常 需要 用 到 表格 。 看 到 其 他 网 站 的 表格 制作 得 一 个 比 一 
个 漂亮 


之 自己 也 很 想 把 网 站 做 得 漂亮 一 点 ， 于 是 就 开始 研究 表格 特效 ， 收 益 颇 深 。 现 在 就 来 和 
大 家 分 享 一 下 我 的 收获 ， 本 节 实 例 将 演示 如 何 使 表格 逐渐 变色 。 


17.7.2 ”实例 应 用 


【 例 17-7】 逐 渐变 色 的 表格 
(1) 新 建 一 个 table_color.html 文件 ,在 该 文件 中 定义 一 个 银行 卡 信息 表 , 包含 卡号 、 密 码 、 
说 明 列 字段 ， 代 码 如 下 所 示 : 


<table cellspacing=2 cellpadding=0 bgcolor=#999999 width=400> 

<caption> 银 行 卡 信息 表 </caption> 

<tr> 
<td width=33% align=center id=chcol0 name=id=chcol0> 
<font color=white> 卡 号 
</td> 
<td width=33% align=center id=chcoll name=id=chcol0> 
<font color=white> 密 码 
</td> 
<td width=33% align=center id=chcol2 name=id=chcol0> 
<font color=white> 说 明 
</td> 

</tr> 


ET 
<td width=33% align=center id=chcol3 name=id=chcol0> 
<font color=white>10001 
</td> 
<td width=33% align=center id=chcol4 name=id=chcol0> 
<font color=white>password 
</td> 
<td width=33% align=center id=chcol5 name=id=chcol0> 
<font color=white> 工 商 卡 
</td> 
<WEr> 
ED 
<td width=33% align=center id=chcol6 name=id=chcol0> 
<font color=white>10002 
</td> 
<td width=33% align=center id=chcol7 name=id=chcol0> 


和 
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<font color=white>1978566 
</td> 
<td width=33% align=center id=chcol8 name=id=chcol0> 
<font color=white> 交 行 卡 
</td> 
AE 
<tr> 
<td width=33% align=center id=chcol9 name=id=chcol0> 
<font color=white>10003 
</td> 
<td width=33% align=center idq=chcol10 name=id=chcol0> 
<font color=white>886688 
</td> 
<td width=33% align=center id=chcolll name=id=chcol0> 
<font color=white> 中 信 卡 
</td> 
/tr 
</table> 


(2) 设置 表格 的 背景 颜色 及 颜色 的 变化 (采用 十 六 进 制 数 )、 变 化 步 长 等 ， 代 码 如 下 所 示 : 


<script language="javascript"> 
IE = (document.all); <!-- 判 断 是 否 是 IE 浏览 器 --> 
二 和 
var chidc = new Array(); <!-- 各 个 表格 的 背景 色 --> 
Var hexc = new 
Mrrawt On LT Or DAB DE 
<!-- 用 于 十 一 十 六 进 制 的 转换 --> 
var chidn = new Array(100,70,40,40,40,40,40,40,40,40,40,40); 


<1-- 初 始 化 --> 
var step = new Array(10,10,10,10,10,10,10,10,10,10,10,10); 
<!-- 变 化 步 长 --> 


Var chway = new 
Array (step[0],step[1],step[2],step[3],step[4],step[5], 
step[6],step[7],step[8],step[9],step[10],step[11]); <!-- 变 化 步 长 --> 
Var tone = new Arran(lr lr 1 ll I ra TI) <1= 守 隐 交 量 > 
上 


</script> 


(3) 定义 一 个 chcol0 函 数 ， 在 该 函数 中 通过 for 循环 依次 改变 表格 的 颜色 ， 再 设置 td 元 素 
的 backgroundColor 背景 色 。 代 码 如 下 所 示 : 


<script> 
function chcol() { 
for (=0; 1<12 4++) { 
chidn [i]+=chway[i] ; ”<!-- 三 个 表格 分 别 按照 设 定 的 步 长 增长 , 最 大 值 不 能 超过 255--> 
if (chidn[i]>=255) { 
chidn[i] = 255; 
chway[i] = -step[i]; ”<!-- 如 果 超 过 了 ， 则 改 为 同样 步 长 的 递减 --> 


< 
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else if (chidn[i]<=40) { <1-- 最 小 值 不 能 低 于 40--> 
chiadn[il = 40; 
chway[i] = stepl[i]; 
tone[i]>=3? tone[i] = 1:tone[i]++; <!--tone 数 组 中 的 值 不 超过 3--> 
| 


coll = hexc[Math-floor(chidn[il/16)]; <!-- 转 换 为 十 六 进 制 表示 --> 
col2 = hexc[chidn[i]%16]; 

tored = "'; 

toblue = "''; 


for (j=1; j<tone[i]; j++) 
tored+="0077 <!-- 分 别 对 红色 分 量 和 蓝 色 分 量 进行 处 理 以 实现 渐变 效果 --> 
for (j=3; j>tone[i]; j--) 
toblue+="'00"'; 
chidc[i] = '#'+toredtcoll+col2+toblue; <!-- 将 值 赋 给 chidc--> 
td = eval('document.all.chcol'+i); 
td.style.backgroundColor = chidc[i]l7 <!-- 设 定 第 个 表格 的 背景 色 --> 


. 
setTimeout('chcol ()"',100); <!1-- 延 时 0.1s--> 
1 
</script> 


(4) 使 用 JavaScript 脚本 调用 chcol0 函 数 来 改变 表格 的 背景 色 ， 代 码 如 下 所 示 : 


<script language="Java Script"> 
chcol(); <!-- 调 用 chcol 函数 --> 
</script> 


17.7.3 ”运行 结果 


在 正 浏览 器 中 运行 table_color.html 文件 ， 可 以 看 到 一 个 变色 的 表格 ， 执 行 效果 如 图 17-8 
所 示 。 


到 渐变 色 的 卖 售 - windowe Internet kxplorer 
GO ewes mee 国 [r x 
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17.7.4 实例 分 析 


应 源码 解析 : 


在 本 实例 中 首先 在 页 面 中 定义 一 个 银行 卡 信息 表 ， 存 储 一 些 银行 卡 的 基本 信息 ， 然 后 声明 


了 一 些 表 格 背 景色 ， 并 使 用 十 六 进 制 的 数据 来 标识 颜色 变化 ， 最 后 定义 了 一 个 用 来 改变 表格 背 
景色 的 函数 chcol()。 


17.8 ”常见 问题 解答 


17.8.1 JavaScript 的 典型 错误 


JavaScript 的 一 个 错误 ， 求 解 ? 
网 络 课堂 : http:/Wbbs.itzcn.comy/thread-12397-1-1.html 


我 写 了 一 个 JavaScript 程序 ， 运 行 时 报 如 下 错误 : 
invalid label 


[Break on this error] $('TipBox') .style.display = (show==true):"","none"; 


$CTipBox) 有 值 ， 但 是 为 什么 使 用 三 元 运算 符 之 后 不 能 将 正确 的 值 赋值 给 
$('TipBox').style.display 呢 ? 
【解决 办 法 】 你 写 的 三 元 运算 符 格式 有 误 ， 三 元 运算 符 的 格式 如 下 : 
表达 式 ? 值 1: 值 2 
show=true 可 以 直接 写成 show， 将 上 面 的 代码 改 为 下 面 的 代码 : 
$('TipBox') .style.display = show?"" 


或 者 


:"none"; 
$('TipBox') .style.display = show?"block":"none"; 
17.8.2 ”变量 每 秒 自 加 1 


在 JavaScript 中 如 何 使 变量 每 秒 自 加 12 
网 络 课堂 : http://bbs.itzcn.comythread-12398-1-1.html 


本 人 初次 接触 JavaScript， 想 实现 用 JavaScript 写 的 变量 每 秒 加 1， 当 达到 一 定数 值 时 弹出 
窗口 显示 该 数值 ， 但 由 于 使 用 JavaScript 比较 生疏 ， 希 望 高 手 能 给 出 相应 的 实现 代码 。 
【解决 办 法 】 使 变量 每 秒 加 1， 代 码 如 下 : 


< 人 mm 
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var count = 07 
window.setInterval ("showNumber ()"，1000) ;7 // 毫秒 单位 
function showNumber () { 
count++; 
if (count == 100) { 
alert (count); 


} 


17.8.3 ”通过 滤 镜 实现 图 片 翻转 的 问题 


通过 滤 镜 实现 图 片 翻转 的 问题 。 
网 络 课堂 : http://bbs.itzcn.com/thread-12399-1-1.html 

有 一 张 图 片 , 它 控制 一 个 div 的 display 属性 。 如 何 实现 单 击 图 片 改变 自 身 的 翻转 方向 呢 ? 
首 写 了 下 面 一 段 JavaScript 代码 : 


function bian() { 
if (document .getElementById("imgl1") .style.filter == "fliph") { 
document .getElementById("imgl") .style.filter = "FlipH"; 


} 
else { 
document .getElementById ("imgl") .style.filter = "FlipV"; 
1 
} 


上 述 可 以 解决 重 直 翻转 的 问题 ， 而 我 需要 的 是 水 平 的 ， 另 外 ， 上 面 的 垂直 翻转 会 停 在 翻 
转 处 不 再 循环 。 

style.filter = "FlipH" 用 于 设置 图 片 水 平 翻转 。 应 用 上 上段 代码 之 后 ， 第 一 次 单 击 可 以 实现 图 
片 的 水 平 翻转 , 但 是 之 后 单 击 图 片 不 会 动 , 我 需要 实现 该 张 图 片 能 连续 翻转 的 特效 ,怎么 实现 ? 

【解决 办 法 】 用 新 的 滤 镜 BasicImage， 简 单 的 使 用 方法 实例 如 下 : 

<DIV ID="oFilterDIV" STYLE="position:absolute; top:50px; left:10px; 

width:240px; 

height:160px; padding:10px; font:bold 13pt verdana; background: yellowgreen; 

filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=0, xray=0, 

mirror=0, 

invert=0, opacity=1, rotation=0)"> 

This is the DIV content.</DIV> 

我 们 要 关注 的 主要 是 rotation 和 mirror 两 个 参数 的 使 用 。rotation 就 是 让 图 片 顺 时 针 转 动 ， 
取 值 0-3， 转 动 的 度数 为 90 的 倍数 即 可 。mirror 就 简单 了 ， 也 就 是 让 图 片 以 镜像 方式 显示 。 相 
信 通 过 设置 这 两 个 参数 就 可 以 达到 任意 翻转 图 片 的 效果 了 。 


st >> 
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17.9 习 题 


1. 填空 题 


(1) JavaScript 的 数据 类 型 主要 有 字符 串 值 、 整 数 、 浮 点 数 、 远 辑 值 和 
(2) JavaScript 运算 符 包 括 == 、+=、%= 、+H 和 
(3) 下 面 代码 运行 的 结果 是 


function hi(){ 


Var a; 
alert (a); 
} 
2. 选择 题 
(1) 以 下 使 用 JavaScript 生成 对 象 的 方法 中 ， 正 确 的 是 
A. varz=new Boolean(a): B. var str = Java Script; 
C. frut=new Array: D. todayl=new Date(2008,10,1):; 


(2) 有 关 JavaScript 语 句 ， 下 列 说 法 正确 的 是 

A 单行 注释 语句 是 在 需要 注释 的 行 前 面 用 \ 

B，with 语句 的 功能 是 为 一 段 程序 建立 默认 对 象 

CjJavaScript 中 没有 if..else 语句 

D. JavaScript 中 只 有 while 语句 ， 而 没有 do...while 语句 
(3) 求 一 个 表达 式 的 值 ， 可 以 使 用 的 函数 有 

A. eval() B. isNaNQO C. parseInt() 

D. parseFloat() E. return() 
(4) JavaScript 的 onSubmit 事件 的 作用 是 

A. 当 一 个 表单 中 的 对 象 被 单 击 时 ， 执 行 RS 事件 
。 当 用 户 提交 一 个 表单 时 ， 需 要 执行 JavaScript 事件 
。， 当 息 标 移出 对 象 时 发 生 的 事件 
对象 发 生 改 变 时 调用 的 事件 

当 一 个 和 鼠标 指针 从 对 象 或 区 域 之 间 移 到 对 象 或 区 域 上 时 ， 调 用 的 事件 

3. 上 机 练习 

上 机 练习 : 闪烁 变色 的 链接 

练习 要 求 : 本 次 练习 首先 需要 定义 闪烁 的 颜色 变化 顺序 ， 然 后 定义 变化 时 的 颜色 数组 。 每 
种 颜色 闪烁 的 时 间 ， 最 后 定义 一 个 为 链接 和 下 划 线 赋 颜 色 取 值 的 函数 ， 并 通过 setTimeout0 函 
数 ， 按 每 种 颜色 闪烁 的 时 间 执 行 一 次 为 链接 和 下 划 线 赋 颜 色 取 值 的 函数 ， 执 行 效果 如 图 17-9 
所 示 。 


外 口中 员 
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图 17-9 闪烁 变色 的 链接 
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内 容 摘 要 : 


经 常 有 朋友 问 我 , 网 站 要 在 哪些 浏览 器 上 测试 ? 要 达到 怎样 的 兼容 ? 我 想 这 或 许 不 仅仅 是 
他 们 的 问题 ， 也 许 是 每 个 Web 设计 人 员 的 疑问 。 

由 于 CSS 标准 的 出 现 比 浏览 器 要 晚 ， 所 以 当时 的 浏览 器 还 不 能 完全 支持 CSS 样式 表 ， 只 
是 支持 CSS 样式 表 中 的 部 分 规则 。 直 到 CSS 2.0 版 本 的 出 现 ， 才 被 广大 浏览 器 厂商 和 网 页 设计 
师 所 重视 和 接受 。 

由 于 各 浏览 器 在 遵循 CSS 标准 的 同时 又 进行 了 自己 的 扩展 ， 因 此 就 会 出 现 CSS 样式 在 不 
同 浏览 器 上 显示 的 效果 不 一 致 的 情况 

本 章 以 目前 主流 浏览 器 IE6、IE8、Firefox 和 chrome 为 例 ， 首 先 介绍 4 个 典型 的 CSS 兼容 
性 问题 的 解决 办 法 ， 然 后 对 Web 设计 人 员 如 何在 开发 中 避免 CSS Bug 的 问题 进行 了 讨论 ， 最 
后 提供 了 一 些 编写 CSS 兼容 性 的 建议 。 

学 习 目 标 : 
掌握 CSS 条 件 注释 的 用 法 
掌握 空白 边 登 加 的 解决 办 法 
了 解 浮动 元 素 产 生 闭合 的 原因 
熟悉 一 种 闭合 浮动 的 解决 办 法 
了 解 DOCTYPE 的 作用 
熟悉 各 个 DOCTYPE 的 定义 方法 
了 解 校 验 CSS Bug 的 方法 
熟悉 捕捉 CSS Bug 的 基本 步骤 
了 解 通用 的 CSS 编写 建议 
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18.1 为 特定 浏览 器 提供 不 同 的 样式 


目前 ， 对 于 CSS 开发 人 员 来 说 最 大 的 问题 是 绝 大 多 数 用 户 仍然 在 使 用 IE6， 而 它 是 一 个 
CSS 规范 支持 较 差 ， 问 题 较 多 的 浏览 器 。 虽 然 微软 在 IE6 的 更 高 版 本 中 修复 了 很 多 众所周知 的 
缺陷 ， 并 添加 了 更 多 对 CSS 2.0 规范 的 支持 ， 但 仍然 有 许多 用 户 无 法 或 者 不 想 从 IE6 升级 到 其 他 
浏览 器 。 

利用 正 的 条 件 注释 可 以 很 好 地 解决 这 个 问题 ， 针 对 特定 的 浏览 器 提供 不 同 的 样式 。 


视频 教学 : 盘 / 视 频 /18/18.1 给 特定 浏览 器 提供 不 同 的 样式 .avi 图 长 度 : 5 分钟 


18.1.1 基础 知识 一 一 条 件 注释 


条 件 注释 (Conditional Comments) 是 一 种 安全 地 区 分 正 浏览 器 版 本 的 语法 ， 且 被 认为 是 取 
代 针 对 IE CSS hack 的 首选 办 法 。 

其 实 条 件 注释 就 是 一 些 让 判断 ， 但 这 些 判 断 不 是 在 脚本 里 执行 的 ， 而 是 直接 在 HTML 代 
码 里 执行 的 。 例 如 ， 如 下 是 一 个 简单 实例 : 

Sr 

这 里 是 正常 的 html 代码 


<![endif]--> 


从 这 个 最 简单 的 实例 中 ， 我 们 可 以 看 到 条 件 注释 具有 如 下 特性 。 
@ 条 件 注 释 的 基本 结构 和 HIML 的 注释 (<!-- -->) 是 一 样 的 。 因 此 正 以 外 的 浏览 器 将 会 
把 它们 看 做 是 普通 的 注释 而 完全 忽略 它们 。 
@ 下 将 会 根据 直 条 件 来 判断 是 否 如 解析 普通 的 页 面 内 容 一 样 解析 条 件 注释 里 的 内 容 。 
@ 条件 注释 使 用 的 是 HTML 的 注释 结构 ， 因 此 它们 只 能 用 在 HTML 文件 里 ， 而 不 能 在 
CSS 文件 中 使 用 。 
根据 上 面 的 介绍 ， 对 其 进行 扩展 便 可 以 使 用 如 下 代码 检测 当前 正 浏览 器 的 版 本 (注意 : 在 
非 正 浏览 器 中 是 看 不 到 效果 的 )。 
<!--[if IE]> 
<h1> 您 正在 使 用 IE 浏览 器 </h1> 
<!--[if IE 5]> 
<h2> 版 本 5</h2> 
<! [endif] 一 -> 
<!--[if IE 5.0]> 
<h2> 版 本 5.0</h2> 
<![endif]--> 
<!--[if IE 5.5]> 
<h2> 版 本 5.5</h2> 
<![endif]--> 
<!--[if IE 6]> 
<h2> 版 本 6</h2> 
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<! [endif]--> 
1 [iF IE 71> 
<h2> 版 本 7</h2> 
<1[endif]--> 
<![endif]--> 
如 果 当 前 的 浏览 器 是 正 , 但 版 本 比 IE5 还 低 , 该 怎么 办 呢 ,， 可 以 使 用 “<!--[iflsIE 5]>” 条 
件 注释 。 但 由 于 条 件 注释 只 能 在 IE5+ 的 环境 之 下 ， 所 以 “<!--[if ls IE 5]>” 根 本 不 会 被 执行 。 
此 时 ， 便 可 以 使 用 条 件 注释 中 的 表达 式 ， 它 有 如 下 可 选 值 。 
@ lte: 就 是 Less than or equal to 的 简写 ， 也 就 是 小 于 或 等 于 的 意思 。 
@ lt: 就 是 Less than 的 简写 ， 也 就 是 小 于 的 意思 。 
@ ”gte: 就 是 Greater than or equal to 的 简写 ， 也 就 是 大 于 或 等 于 的 意思 。 
@ gt: 就 是 Greater than 的 简写 ， 也 就 是 大 于 的 意思 。 
@  !: 就 是 不 等 于 的 意思 ， 跟 Java Script 里 的 不 等 于 判断 符 相 同 。 
例如 ， 如 下 是 应 用 这 些 表达 式 的 实例 语句 : 


5 / 如 果 IE 版 本 大 于 5.5 / 
<!--[if lte IE 6]> / 如 果 IE 版 本 小 于 等 于 6 / 
CAS / 如 果 浏 览 器 不 是 IE / 


本 节 开 始 就 说 明了 ， 由 于 正 各 版 本 的 浏览 器 对 制作 的 Web 标准 的 页 面 解释 不 一 样 ， 具 体 
就 是 对 CSS 的 解释 不 同 ， 因 此 为 了 使 不 同 版 本 的 浏览 器 都 能 够 兼容 ， 可 运用 条 件 注 释 来 各 自 
定义 ， 最 终 达到 兼容 的 目的 。 例 如 : 

<!-- 默认 先 调用 css .css 样式 表 --> 


<link rel="stylesheet" type="text/css" href="css.css" /> 


qb oR a Es 

<!-- 如 果 IE 浏览 器 版 本 是 7， 调 用 ie7.css 样式 表 --> 

<link rel="stylesheet" type="text/css" href="ie7.css" /> 
<l[lendiEl => 


<l==[if 1te, IE 6]> 
<!-- 如 果 IE 浏览 器 版 本 小 于 等 于 6， 调 用 ie .css 样式 表 --> 
<link rel="stylesheet" type="text/css" href="ie.css" /> 
<llendifl==> 
这 样 就 能 够 区 分 下 7 和 IE6 以 下 的 浏览 器 对 CSS 的 执行 ， 从 而 达到 兼容 的 目的 。 同时， 首 
行 默 认 的 css.css 还 能 与 其 他 非 正 浏览 器 实现 兼容 。 
@ ” 默认 的 CSS 样式 应 该 位 于 HTML 文档 的 首 行 , 进行 条 件 注释 判断 的 所 有 内 容 必须 
注意 | ”位 于 该 默认 样式 之 后 。 
例如 如 下 代码 ， 在 正 浏览 器 下 执行 显示 为 红色 ， 而 在 非 正 浏览 器 下 显示 为 黑色 。 如 果 把 
条 件 注释 判断 放 在 首 行 ， 则 不 能 实现 。 该 实例 就 能 够 说 明 如 何 解决 网 页 对 正 浏览 器 和 非 正 浏 
览 器 的 兼容 性 问题 。 
<style type="text/css"> 
body{ 
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background-color: #000; 

| 

</style> 

ee 

<style type="text/css"> 

body{ 

background-color: #F00; 

} 

</style> 

<!l[endif]--> 

在 上 述 代码 中 ， 使 用 “<!--[if ! 下 ]>” 代 码 来 定义 非 正 浏览 器 下 的 样式 。 但 是 在 下 5 及 其 
以 上 版 本 中 ，<!--[if ls IE 5]> 表 达 式 将 不 会 被 执行 ， 而 是 当 作 注 释 被 忽略 。 


18.1.2 ”实例 描述 


在 浏览 器 厂商 市 场 分 割 及 版 本 多 元 化 的 今天 ， 单 单 是 给 CSS 做 优化 已 不 能 满足 页 面 制作 
的 需要 。 完 美的 页 面 结构 ， 可 以 省 去 很 多 的 优化 步骤 ， 但 对 于 版 本 间 不 同 的 盒子 模型 来 说 。 与 
其 写 hack, 还 不 如 为 每 个 不 同 解释 定义 的 版 本 写 一 套 CSS。 无 论 在 制作 时 间 上 还 是 维护 成 本 上 ， 
这 都 是 一 个 可 以 考虑 的 解决 方案 。 

这 就 用 到 了 CSS 的 条 件 注释 ， 这 是 一 种 只 在 Windows IE 上 被 识别 的 注释 ， 从 IE5 开始 支 
持 。 这 就 是 说 ， 被 定义 于 其 中 的 东西 只 在 下 下 被 识别 ， 这 就 成 为 一 个 能 够 很 好 的 跨 浏 览 器 样 
式 一 致 性 问题 的 解决 方案 。 


18.1.3 ”实例 应 用 


【 例 18-1】 给 特定 浏览 器 提供 不 同 的 样式 
(1) 打开 一 个 需要 针对 浏览 器 来 设置 样式 的 HTML 文件 。 然 后 ， 在 能 够 正常 显示 该 页 面 的 
IE 浏览 器 中 打开 ， 查 看 效果 。 如 图 18-1 所 示 ， 为 本 实例 在 IE6 中 显示 正常 的 页 面 效 果 。 
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18-1 IE6 中 显示 的 效果 


(2) 使 用 更 高 版 本 的 正 浏览 器 打开 同一 个 页 面 , 查看 效果 是 否 相同 。 如 图 18-2 所 示 为 下 8 
中 的 运行 效果 。 


>> 
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图 18-2 IE8 中 显示 的 效果 


(3) 对 比 以 上 两 图 就 会 发 现 ， 在 IE8 中 页 面 的 导航 菜单 显示 不 正常 。 这 时 便 需 要 通过 条 件 
注释 来 针对 IE8 浏览 器 修复 这 个 问题 。 如 下 所 示 是 这 个 菜单 的 HTML 代码 : 


<DIV id="nav_ index"> 
<ul> 
<LI><A href="http://school.itzcn.com"> 教 育 学 院 </A> </LI> 
<LI><A href="http://bbs.itzcn.com"> 学 术 论 坛 </A> </LI> 
<LI><A href="http://blog.itzcn.com"> 技 术 文 档 </A> </LI> 
<LI><A href="http://home.itzcn.com"> 娱 乐 空间 </A> </LI> 
<LI><A href="http://www.itzcn.com"> 窗 内 首页 </A> </LI> 
<LI><SPAN></SPAN></LI> 
</ul> 
</DIV> 


(4) 在 页 面 的 head 元 素 内 链接 外 部 CSS 的 下 方 ， 添 加 如 下 的 条 件 注释 语句 针对 IE8 来 单 
独 设置 CSS 样式 文件 。 


<l==T1if TE .01> 
<LINK href="ie8.css" type="text/css" rel="stylesheet"> 
<![endif]--> 


(5) 打开 ie8.css 文件 ， 然 后 根据 上 步 给 出 的 效果 和 HTML 代码 重复 编写 CSS 样式 ， 最 终 
达到 相同 的 效果 。 代 码 如 下 所 示 : 


#nav index { 
MARGIN:5px Opx; 
WIDTH: 762px; 
height:38px; 
POSITION: relative; 
background-image: url (images/navbg.gif); 
background-repeat: repeat; 
background-position: Opx -76px; 
clear:both; 

} 


(6) 保存 对 HTML 页 面 的 修改 ， 完 成 实例 的 制作 。 


< 
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18.1.4 ”运行 结果 


运行 效果 如 图 18-3 所 示 ， 显 示 正 常 ， 说 明 条 件 注释 起 作用 了 。 


由 于 条 件 注释 只 针对 下 有 效 ， 所 以 现在 只 需要 在 IE8 中 打开 看 看 是 否 显示 正常 就 可 以 了 。 
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18.1.5 “实例 分 析 
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18-3 IE8 中 显示 的 正常 效果 
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本 实例 中 由 于 原来 的 HTML 页 面 在 IE8 中 显示 不 正常 ， 所 以 利用 CSS 条 件 注释 对 匹配 的 
IE8 浏览 器 单独 编写 CSS 样式 ， 以 达到 显示 正常 的 效果 。 

CSS 条 件 注释 的 优势 非常 明显 ， 而 且 也 非常 容易 记 住 ， 是 对 常规 HTML 注释 的 扩展 。 主 
要 的 缺点 就 是 这 些 注释 需要 放 在 HTML 中 ， 而 不 是 放 在 CSS 中 。 这 样 一 来 ， 当 我 们 希望 不 再 
支持 某 种 浏览 器 时 ， 就 需要 在 每 个 HIML 页 面 中 删除 针对 该 浏览 器 的 CSS 条 件 注释 。 


18.2 ”解决 空白 边 到 加 问题 


由 于 W3C CSS2.1 规定 的 了 


即使 一 个 有 经 验 的 Web 设计 人 员 在 制作 页 面 时 ， 也 难免 会 出 现 空白 


E 常 现象 。 


边 合 加 的 问题 。 


出 现 这 种 问题 的 原因 并 不 是 浏览 器 的 解释 有 Bug， 或 者 浏览 器 对 W3C 的 支持 不 好 ， 而 是 


为 什么 在 正 浏览 器 中 没有 呢 ? 这 是 因为 在 正 浏览 器 中 设 定 了 宽度 和 高 度 ， 触 发 了 正 的 
布局 事件 ， 如 果 去 除 例子 中 的 宽度 和 高 度 (记得 给 子 元 素 增加 内 容 文 字 )， 就 会 发 现 它 的 实际 效 


果 其 实 和 开始 在 Firefox 中 是 一 致 的 (也 就 是 说 ， 出 现 这 种 现象 是 正常 的 )。 


入 视频 教学 : 光盘 /视频 /18/18.2 解决 空白 边 重 加 问题 .avi 


>> 


@ 长 度 : 5 分 名 
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18.2.1 ”基础 知识 一 一 空白 边 又 加 


简单 地 说 ， 当 两 个 垂直 的 空白 边 相遇 时 ， 它 们 将 会 形成 一 个 空白 边 。 这 个 空白 边 的 高 度 等 
于 两 个 发 生 受 加 的 空白 边 中 的 较 大 者 。 
当 一 个 元 素 出 现在 另 一 个 元 素 上 面 时 , 第 一 个 元 素 的 低空 白 边 与 第 二 个 元 素 的 顶 空 白 边 发 
生 释 加。 例如， 下面 的 CSS 样式 代码 : 
#Boxl { 
height: 40px; 
border: lpx solid #000; 
margin: 30px; 
background-color: #CCC; 


1 

#Box2 { 
margin: 30px; 
border: lpx solid #000; 
background-color: #CCC; 
height: 40px; 

} 


两 个 元 素 的 空白 边 合 加 的 效果 如 图 18-4 所 示 。 


or Toy [Ne A om -3 « es0v LK WW Vicede OPO) 


图 18-4 ”空白 边 琶 加 


当 一 个 元 素 包含 在 另 一 个 元 素 中 时 (假设 没有 填充 或 边框 将 空白 边 分 隔 开 )， 它 们 的 项 和 底 
空白 边 也 会 发 生 受 加 。 还 有 一 种 情况 ,假设 有 一 个 空 元 素 , 它 有 空白 边 , 但 是 没有 边框 和 填充 。 
在 这 种 情况 下 ， 顶 空白 边 与 底 空白 边 就 碰 到 了 一 起 ， 此 时 也 会 发 生 共 加。 

空白 边 舍 加 初 看 上 去 可 能 有 点 奇怪 , 但 是 它 实际 上 是 有 意义 的 。 例 如 ， 以 由 多 个 段落 组 成 
的 典型 文本 页 面 为 例 。 第 一 个 段落 上 面 的 空间 等 于 段落 的 项 空白 边 。 如 果 没 有 空白 边 登 加， 那 
么 后 续 所 有 段落 之 间 的 空白 边 将 是 相 邻 项 空白 边 和 底 空白 边 的 和 , 这 意味 着 段落 之 间 的 空间 是 
页 面 顶部 的 两 倍 。 如 果 发 生 空白 边 倒 加， 段落 之 间 的 顶 空白 边 和 底 空白 边 就 车 加 在 一 起 ， 这 样 
各 处 的 距离 就 一 致 了 ， 如 图 18-5 所 示 。 

@ ” 只 有 首 通 文档 流 中 区 块 的 重 直 空白 边 才 会 发 生 王 加 。 对 于 行内 块 、 浮 动 块 或 绝对 

提示 | ”定位 块 之 间 的 空白 边 是 不 会 登 加 的 。 


< 人 mm 


st >> 


没有 空白 边 炙 加 有 空白 边 炙 加 


nama 上 


We === 


段落 之 间 的 空间 是 
顶部 空间 的 两 倍 


图 18-5 ”维护 段落 间距 的 空白 边 


18.2.2 ”实例 描述 


空白 边 合 加 是 一 个 相当 简单 的 概念 ， 但 是 在 实际 对 网 页 进行 布局 时 ， 它 会 造成 许多 混淆 。 
很 多 时 候 我 们 并 不 希望 这 样 ， 下 面 是 一 些 常用 的 解决 方法 。 


18.2.3 ”实例 应 用 


【 例 18-2】 人 解决 空 白 边 营 加 问题 
(1) 新 建 一 个 HTML 页 面 ， 命 名 为 collapsingMargin.html。 
(2) 在 页 面 的 body 元 素 中 添加 如 下 的 代码 : 
<div id="wrap"> 
<div id="header" > 经 典 语录 </div> 
<div id="content"> 
<ul> 
<1i> 窗 外 放晴 了 ， 屋 内 仍 继续 下 雨 。 我 微笑 ， 并 不 等 于 我 快乐 。 我 撑 伞 ， 并 非 只 是 为 了 避 雨 。 你 
永远 都 不 懂 我 在 想 什么 。</1i> 
<1i> 我 努力 寻找 希望 ， 生 怕 幸 运 就 在 身边 ， 却 被 我 粗心 错过 。</1i> 
<1i> 飞 起 来 的 时 候 ， 幸 福 的 感觉 就 来 了 。 </1i> 
<1i> 风 吹 过 湖面 ， 柳 条 摇 电 ， 石 头 上 布 满 苍老 的 青 苦 ， 湖 底 铺 着 陈腐 的 枯 叶 ， 鱼 儿 在 清澈 水 里 相 
互 追 逐 ， 小 鸟 在 鸣 唱 ， 空 气 中 弥漫 着 果 香 ， 这 里 仿 若 仙 境 。 
而 我 心中 却 只 是 在 担心 ， 回 家 时 该 如 何 告诉 妈妈 ， 我 又 不 小 心 掉 落 了 一 双 心 爱 的 小 红 鞋 </1i> 
<1i> 我 的 心 开 始 下 雪 ， 雪 无 声 地 覆盖 了 所 有 ， 沽 灭 了 迷 蛋 ， 骄 傲 与 哀痛 ， 当 一 切 归于 家 静 时 ， 世 
界 突然 变 得 清亮 明朗 。 
所 以 ， 别 为 我 忧伤 ， 我 有 我 的 美丽 ， 它 正 要 开始 …… 和/ 


</ul> 
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</div> 
</div> 
(3) 为 页 面 设 置 一 个 背景 图 片 ， 然 后 定义 #wrap 容器 在 页 面 中 的 显示 样式 。 
#wrap { 


text-align: left; 

margin: 130px 30px 30px 30px; 
padding: 20px; 

width: 500px; 

border: Spx solid #6F3623; 
overflow: auto; 


} 
(4) 定义 元 eader 中 标题 的 显示 样式 ， 并 设置 margin 属性 ， 代 码 如 下 : 


#header { 
margin:10px; 
color:#006; 
font-size:24px; 
font-weight:bold; 
text-align:center; 
background-color:#EAEAEA; 
border-bottom: 3px dashed #703724; 
} 


(5) 为 #content 中 的 内 容 定 义 样式 ， 也 包含 margin 属性 ， 代 码 如 下 : 


#content { 
margin:10px; 
border:lpx solid red; 


} 


(6) 在 浏览 器 中 打开 查看 效果 。 由 于 元 eader 和 #content 位 于 同一 层次 ， 且 都 设置 了 margin 
属性 ， 此 时 会 发 现 空白 边 琶 加 效果 导致 的 间隙 比较 小 ， 如 图 18-6 所 示 。 


18-6 ”空白 边 全 加 时 的 运行 效果 


(7) 要 解决 这 个 问题 ， 首 先 在 #content 的 样式 中 添加 “float:left” 属 性 ， 然 后 在 #beader 和 
#content 容器 之 间 添 加 如 下 代码 : 


< 人 ——— 


< 开发 学 习 实录 - 必 


<div style="clear:both"></div> 


(8) 保存 对 HTML 页 面 的 修改 ， 完 成 实例 的 制作 。 


18.2.4 ”运行 结果 


再 次 运行 ， 在 浏览 器 中 查看 运行 效果 。 此 时 会 看 到 ，# 抽 eader 和 #content 之 间 的 间距 变 成 了 
双 倍 ， 即 20px， 如 图 18-7 所 示 。 


0 ， 衣 梢 际 天 OIE51 ， 鱼 / 儿 下 寺 询 本 王 


: 并 有 不 小 全 夺 了 一 上 必要 风 沾 
0D 开 如 下 二 ， 因 天 第 了 部 ,大计 网 ， 避 和 商 ， 当 一 HN 于 副科。 
在 愉 和 志江 明 匠 ， 所 L) ， 虽 罗 世 全 ， 革 有 人 到， 它 记 帮 和 


18-7 ”解决 芥 加 后 的 运行 效果 


18.2.5 ”实例 分 析 


点 源码 解析 : 


通过 本 实例 ， 我 们 了 解 了 产生 空白 边 痘 加 的 原因 ， 而 且 掌 握 了 出 现 此 问题 时 的 解决 办 法 。 
但 是 要 注意 , 有 时 空白 边 痘 加 问题 并 不 需要 解决 ， 例 如 在 显示 大 段 文本 或 者 段落 时 。 因 此 ， 
读者 在 实际 设计 页 面 时 应 该 区 分 何 时 希望 产生 警 加 ， 并 加 以 处 理 。 


18.3 ”避免 浮动 元 素 闭合 


CSS 中 的 float 属性 在 页 面 排版 上 非常 有 用 ， 但 同时 也 带 来 了 很 多 问题 。 最 常见 的 就 是 浮 
动 元 素 的 闭合 问题 。 
上 视频 教学 : 光盘 /视频 /18/18.3 ”避免 浮动 元 素 闭合 .avi 全 长 度 : 6 分 钟 
18.3.1 基础 知识 一 一 闭合 浮动 元 素 


很 多 人 都 研究 过 闭合 浮动 元 素 的 问题 ， 但 是 解决 方法 却 不 一 样 ， 也 并 不 是 每 一 种 方法 都 尽 
善 尽 美 。 闭 合 浮动 元 素 (或 者 叫 清除 浮动 ) 是 Web 标准 设计 中 经 常会 遇 到 的 一 个 问题 ， 因 此 ， 这 


sf >> 
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里 总 结 一 下 目前 经 常用 到 的 几 种 方法 ， 并 比较 一 下 它们 的 易 用 性 和 适用 环境 。 
1. 产生 原因 


最 简单 的 一 种 情形 就 是 我 们 把 一 个 小 的 、 固 定 宽度 的 div 元 素 (比如 导航 、 引 用 等 ) 和 其 他 
元 素 内 容 一 起 包含 在 一 个 大 的 div 中 。 比 如 下 面 这 段 代 码 : 

<div id="outer"> 

<div id="inner"> <h2> 我 的 地 盘 听 我 的 </h2> </div> 
<h1> 我 的 理想 </h1> 
<p> 春 暖 花 开 面 朝 大 海 </p> 

</div> 

可 以 为 id 为 “ 夫 nner” 的 层 设 定 一 个 宽度 值 (比如 说 20%)， 但 是 由 于 div 是 块 级 元 素 ， 即 
使 设 定 了 宽度 ， 其 后 面 的 内 容 也 只 能 在 下 一 行 中 显示 ， 除 非 我 们 给 它 设 定 一 个 浮动 属性 (向 左 
浮动 或 者 向 右 浮动 )。 那 么 此 时 就 会 产生 我 们 上 面 提 到 的 问题 了 。 

如 果 id 为 “##inner” 的 层 的 宽度 和 高 度 都 比 “#outer” 小 ， 就 不 会 有 问题 。 

但 是 ， 如 果 “##inner” 的 高 度 超过 了 “#outer”， 那 么 它 的 底部 就 会 超出 id 为 “#outer” 的 
层 的 底部 。 这 是 因为 为 id 为 “##nner” 的 层 设 定 float 属性 后 ， 它 就 会 脱离 文本 流 ， 无 论 其 宽度 
和 高 度 怎么 变化 都 不 会 使 id 为 “#outer” 的 层 跟 随 变 化 。 这 就 是 我 们 所 提 到 的 “清除 浮动 (闭合 
浮动 元 素 )” 或 者 是 “闭合 浮动 ”问题 。 

2. 解决 办 法 

通过 前 面 的 描述 ， 在 了 解 闭合 浮动 元 素 产生 的 原因 之 后 ， 解 决 起 来 自然 就 不 费事 了 。 目 前 
针对 这 个 问题 ， 主 要 有 4 种 解决 办 法 ， 下 面 依次 介绍 这 几 种 方法 。 

1) 增加 标签 法 

这 也 是 W3C 推荐 的 方法 ， 就 是 在 内 容 的 末尾 增加 一 个 空 的 标签 。 典 型 的 做 法 就 是 使 用 类 
似 下 面 这 样 的 代码 : 

<br style="clear:both;" /> 

或 者 : 

<div style="clear:both;"></div> 


这 种 办 法 通过 增加 一 个 HTML 元 素 迫 使 外 部 容器 撑 开 。 不 过 这 个 办 法 会 增加 额外 的 标签 ， 
使 HTML 结构 看 起 来 不 够 简洁 。 
2) 使 用 after 伪 类 
使 用 after 伪 类 和 内 容声 明 在 指定 的 末尾 添加 新 的 内 容 。 经 常 的 做 法 就 是 添加 一 个 “点 ”， 
因为 它 比较 小 , 不 太 引 人 注意 。 然 后 我 们 再 利用 它 来 清除 浮动 (闭合 浮动 元 素 )， 并 隐藏 这 个 内 容 : 
#outer:afterf{ 
content:"."; 
height:0; 
visibility:hidden; 
display:block; 
clear:both; 


< 人 @—— 


但 奇怪 的 是 ，Windows 中 的 下 6 及 以 下 版 本 并 不 支持 CSS 2.0 中 的 after 伪 类 ， 而 Mac 中 
的 下 却 可 以 正常 使 用 ， 所 以 我 们 还 要 单独 针对 Win/IE 进行 处 理 。 在 区 分 Win 和 Mac 中 
Internet Explorer 的 诸多 方法 中 ， 最 常用 就 是 Holly 招数 。Holly 招数 的 原理 是 这 样 的 ， 其 CSS 
代码 如 下 : 


/* 这 段 代码 只 有 win/IE 可 以 看 见 \*/ 
css 规则 
/* 结束 Hack */ 


上 面 的 代码 中 有 两 行 注释 ， 其 中 第 一 行 结束 时 出 现 了 反 斜 杠 ()， 在 Mac 的 正 中 会 认为 注 
释 并 没有 结束 ， 于 是 继续 向 下 执行 直到 第 一 个 结束 的 “*/” 出 现 ， 这 中 间 的 所 有 字符 都 被 当 作 
是 注释 ， 而 Win/IE 却 也 只 会 把 第 一 行 和 第 三 行 看 做 是 注释 ， 中 间 的 为 有 效 代码 。 所 以 这 样 就 
区 分 出 来 了 不 同 平台 上 的 IE 了。 
正 是 基于 以 上 原理 ， 在 Windows 的 下 6 中 清理 浮动 ， 可 以 使 用 如 下 代码 : 


#outer { 
display:inline-block; 

} 

/* Holly Hack Begine \*/ 

* html #outer { 
height:1%; 

} 

#outer { 
display:block; 

} 

/* End Hack */ 


例如 ， 如 果 不 考 虑 Mac/IE6 用 户 ， 只 需要 写 “* html #outer {height:1%;}” 即 可 。 另 外 ， 似 
乎 在 IE7 中 “display:inline-block” 并 不 起 作用 。 因 此 要 使 用 最 完整 的 Hack 招数 。 


全 如果 对 如 何 使 用 CSS2 中 的 伪 类 不 熟悉 ， 可 以 参见 本 书 的 第 3 章 . 


3) 浮动 外 部 元 素 (float-in-float) 

这 种 方法 很 简单 ， 就 是 把 “#outer” 元 素 也 进行 浮动 (向 左 或 者 向 右 )。 

但 这 种 方法 同时 也 会 带 来 一 个 问题 ， 就 是 和 “#outer” 相 邻 的 下 一 个 元 素 会 受到 “#outer” 
的 影响 ， 位 置 会 产生 变化 ， 所 以 使 用 这 种 方法 一 定 要 小 心 。 

$ 有 选择 性 地 把 页 面 中 的 所 有 元 素 都 浮动 起 来 ， 最 后 使 用 一 个 适当 的 、 有 意义 的 元 
颖 万” 素 (比如 页 脚 ) 进 行 清理 浮动 ， 这 有 助 于 减少 不 必要 的 标记 . 

4) 设置 overflow 为 hidden 或 者 auto 

把 “#outer” 样 式 的 属性 overflow 值 设置 为 hidden 或 者 auto 同样 可 以 清理 浮动 ， 这 种 方法 
不 需要 添加 额外 的 标记 。 但 是 使 用 overflow 属性 的 时 候 一 定 要 小 心 ， 因 为 它 会 影响 浏览 器 的 
表现 。 

另外 ,在 下 6 中 单纯 地 设置 overflow 为 hidden 或 者 auto 并 不 能 有 效 清除 浮动 (闭合 浮动 元 


st >> 
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素 )， 还 要 指定 “#outer” 样 式 的 一 个 维度 ， 即 要 么 给 它 指定 一 个 宽度 ， 要 么 指定 一 个 高 度 : 


#outer { 
overflow:auto; 
width:100%; 

| 


如 果 要 在 Mac/IE5 上 使 用 这 种 方法 清除 浮动 (闭合 浮动 元 素 ), 就 必须 设 定 overflow 
注意 | 的 属性 值 为 hidden。 
5) 比较 与 选择 
下 面 我 们 来 比较 一 下 这 4 种 方法 。 首 先 ，, 不 推荐 使 用 after 伪 类 。 对比 其 他 三 种 方法 ,holly 
招数 有 点 太 烦琐 ,不 好 掌握 ， 而 且 这 种 方法 存在 更 多 的 不 确定 性 。 推 荐 对 代码 有 “ 洁 间 ” 并 且 
技术 较 高 的 编程 人 员 使 用 。 那 么 ， 其 他 三 种 方法 其 实 都 可 以 考虑 。 
@ “不 过 使 用 overflow 时 ， 可 能 会 对 页 面 表现 造成 影响 ， 而 且 这 种 影响 是 不 确定 的 ， 最 好 
在 多 个 浏览 器 上 测试 页 面 。 
@ ”而 对 于 使 用 额外 标签 清除 浮动 (闭合 浮动 元 素 )， 是 W3C 推荐 的 做 法 。 至 于 使 用 <br /> 
元 素 还 是 空 <div></div> 可 以 根据 自己 的 喜好 来 选 (当然 也 可 以 使 用 其 他 块 级 元 素 )。 不 
过 要 注意 的 是 ，<br /> 本 身 是 有 表现 的 ， 它 会 多 出 一 个 换行 ， 所 以 要 设 定 它 的 height 
为 0， 以 隐藏 它 的 表现 。 在 大 多 数 情 况 下 使 用 空 <div> 比 较 合 适 。 
@ 。 float-in-float 也 是 一 个 很 好 的 选择 ， 把 要 进行 清理 浮动 的 元 素 外 层 再 加 上 一 层 <div>， 
并 设置 属性 float:left 即 可 ， 不 过 要 注意 相 邻 元 素 的 变化 。 


18.3.2 ”实例 描述 


最 近 两 个 月 陆续 做 了 几 个 网 站 的 美工 , 做 的 过 程 中 对 div+CSS 的 标准 开发 有 了 进一步 的 了 
解 。 有 两 点 收获 最 大 ， 一 是 彻底 弄 懂 了 CSS 的 盒子 模式 (Box Model)， 再 一 个 就 是 搞定 了 困扰 
我 很 久 的 “闭合 浮动 元 素 ” 的 问题 。 

一 般 说 来 如 果 某 个 子 元 素 使 用 了 浮动 (float)， 那 么 父 元 素 总 是 不 能 确切 地 知道 子 元 素 是 在 
什么 位 置 结束 的 , 所 以 父 元 素 的 下 边框 总 是 从 子 元 素 的 中 间 甚 至 是 顶部 穿 过 , 看 起 来 很 不 舒服 。 


18.3.3 ”实例 应 用 


【 例 18-3】 避 免 浮动 元 素 闭 合 
(1) 新 建 一 个 HTML 页 面 ， 命 名 为 ClearFloat html。 
(2) 在 页 面 的 body 元 素 中 添加 如 下 代码 : 


<div id="wrap"> 
<div class="left"> 
<h2> 摇 篮 网 小 黑板 </h2> 
<!-- 此 处 省 略 其 他 HTML 代码 --> 
</div> 
<div class="right"> 


< 人 mm 
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<h2> 怎 么 联系 我 们 </h2> 
<!-- 此 处 省 略 其 他 HTML 代码 --> 
</div> 
</div> 


(3) 为 页 面 设置 一 个 背景 图 片 ， 然 后 定义 #wrap 主 容器 在 页 面 中 的 显示 样式 ， 代 码 如 下 : 


#wrap { 
margin: 20px; 
padding: 1l0px; 
border: Spx solid #FOFCFC; 
text-align: left; 
} 


(4) 定义 左边 div 容器 的 样式 类 left， 代 码 如 下 所 示 : 


eert 
float:left; 
width:38%; 
padding:10px; 
4 


(5) 定义 左边 div 容器 的 样式 类 right， 代 码 如 下 所 示 : 


eriqht TH 
float:right; 
width:52%; 
padding:10px; 
border-left-width: 6px; 
border-left-style: solid; 
border-left-color: #6B9F4A; 
} 


(6) 在 浏览 器 中 打开 查看 效果 。 由 于 left 和 right 位 于 同一 层次 ， 且 都 设置 了 float 属性 。 此 
时 会 发 现 主 容器 并 没有 随 子 容器 的 内 容 而 扩展 ， 如 图 18-8 所 示 。 


18-8 未 闭合 浮动 元 素 的 运行 效果 
(7) 根据 前 面 介 绍 过 的 内 容 , 解决 办 法 非常 简单 , 只 需 为 主 容器 #wrap 添加 “overflow:auto;” 


代码 即 可 。 
(8) 保存 对 HIML 页 面 的 修改 ， 完 成 实例 的 制作 。 


>> 
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18.3.4 ”运行 结果 


18-9 闭合 浮动 元 素 的 运行 效果 


18.3.5 “实例 分 析 


6 源码 解析 : 


对 比 图 18-8 和 图 18-9 就 可 以 看 出 ， 在 为 主 容器 #wrap 添加 “overflow:auto;” 代 码 之 后 ， 
它 的 高 度 随 子 容器 的 内 容 而 向 下 扩展 ， 从 而 清除 了 浮动 元 素 的 闭合 问题 。 
当然 ， 我 们 也 可 以 在 容器 之 后 增加 如 下 的 空 标签 来 解决 这 个 问题 。 


<div style="clear:both"></div> 


18.4 选择 合适 的 DOCTYPE 


DOCTYPE 声明 位 于 文档 中 最 前 面 的 位 置 ， 处 于 <html> 标 签 之 前 。 此 标签 可 告知 浏览 器 ， 
文档 使 用 哪个 版 本 的 HTML 或 XHTML 规范 。 
该 标签 可 声明 三 种 DTD 类 型 , 分 别 表示 严格 版 本 、 过 渡 版 本 以 及 基于 框架 的 HTML 文档 。 


视频 教学 : 光盘 /视频 /18/18.4 选择 合适 的 DOCTYPE.avi 侠 长 度 :11 分钟 
18.4.1 基础 知识 一 一 DOCTYPE 的 作用 
除了 正本 身 的 缺陷 之 外 ， 最 可 能 的 问题 是 因为 正 在 显示 页 面 时 使 用 了 “怪异 ”模式 。 许 


多 现代 浏览 器 都 提供 了 两 种 显示 模式 。“ 怪 异 ” 模 式 在 显示 文档 时 ， 使 用 的 是 像 Netscape 4、 
IE5 等 老 版 本 浏览 器 中 具有 较 多 缺陷 的 版 本 。 标 准 模式 则 是 按照 W3C 规范 来 显示 文档 的 。 


< 人 mm 


后， 开发 学 习 实录 -和 


@ ”使 用 老 版 本 DOCTYPE 的 文档 通常 在 格式 化 方面 存在 不 足 ， 或 者 那些 根本 没有 使 用 
DOCTYPE 的 文档 ， 会 直接 使 用 “怪异 ”模式 显示 。 

@ ”使 用 严格 的 XHTML DOCTYPE 的 文档 ， 就 会 以 标准 模式 显示 。 

但 是 仍然 需要 注意 ， 这 对 于 下 6 来 说 并 不 是 很 简单 的 问题 。 例 如 ， 不 管 在 文档 最 前 面 的 


DOCTYPE 语言 中 指定 什么 ， 包 括 XML 声明 ，IE 6 仍然 会 以 “怪异 ”模式 来 显示 。 


Re >> 


例如 ， 有 一 个 XHTML 文档， 里 面包 含 了 如 下 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/zxhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 测 试 </title> 
</head> 
<style type="text/css"> 
#wrap { 
margin: 20px; 
width: 300px; 
padding: 1l0px; 
border: S5px solid #6F3623; 
overflow: auto; 


text-align: left; 
} 
</style> 
<body> 
<div id="wrap"> 
<p> 这 是 一 个 普通 的 div 元 素 ,margin 属性 为 20px,width 属性 为 300px,padding 属性 为 10px， 
border 属性 为 5px </p> 
</div> 
</body> 
</html> 


如 图 18-10 所 示 为 这 个 文档 在 Firefox 与 下 6 中 的 显示 效果 。 


测试 - Mozilla Firefox 回避 局 oft Internet Explorer 
妨 得 Q) 查看 WW 所 史 G) 书签 名 工具 CD 导 押 00 文件 加 护短 划 ) 查看 必 半 4 工具 D 乔 助 0) 3 


《个 峡 (上 昌 ]saemavaweve 全 -| 国 -| 5 月 Oaa-© 国 国信 Per wax Ont © DO 


加 a 关 二 WshwGwo Wet3f 放 成 功 Z 踊 MCSS 福 代 码 UI6MIDCTYIE htnl 。 汪 | 国 加 到 馆 控 “ 


这 是 一 个 曾 通 的 dv 元素，nargin 属 性 为 40px ， width 属性 央 400pz ,puddin 这 是 一 个 普通 的 dv 元 素 ，margin 属 性 为 40px, 
属 生 为 20pe yberdur 量 作为 355 ee width 属 性 为 400px，padding 属 性 为 30pz，border 
属性 为 5px 


本 ww Conpeter 


18-10 同一 文档 在 Firefox 与 IE 6 中 的 显示 效果 
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这 是 因为 在 DOCTYPE 的 前 面 添加 了 XML 声明 (XHTML 文档 的 第 一 行 )。 如 果 将 这 个 声 
明 从 文档 中 删除 ， 那 么 DOCTYPE 声明 就 成 了 该 页 面 的 第 一 个 元 素 。 此 时 ， 在 正 中 就 会 以 标 
准 模式 呈现 ， 如 图 18-11 所 示 。 而 在 下 7 中 , 即使 添加 了 这 个 XML 声明 也 不 会 切换 到 “怪异 ” 
模式 ， 因 此 其 显示 效果 将 和 其 他 新 版 本 浏览 器 十 分 相似 。 


文件 四 锭 得 思 ) 查看 如 收 硕 由。 工具 中 剧 助 四) 


sa- 日 国 国 @ Pur unr nt OB. ” 


过 让 加 机 \shrow WYet 开 发 成 功 之 跨 \CSS\ 福 代码 \8\IDCTYIE. htnl 国 | 国 苇 到 诞生“ 


这 县 一 个 交通 的 giv 元 素 ，nargin 属 性 为 40yx ,width 属性 为 400pr ， petdine 这 是 一 个 普通 的 dy 元素 ，margn 需 性 为 40px，wiath 赂 性 为 


ee eracx 必 全 区 
0 me 400pz，Paddirg 属 性 为 30pz，border 属 性 为 px 


图 18-11 去 除 XML 声明 后 ，Firefox 与 IE 6 中 的 显示 效果 


18.4.2 ”基础 知识 一 一 定义 DOCTYPE 


如 果 你 正在 创建 一 个 新 网 站 ， 无 论 使 用 哪 种 DTD， 都 建议 采用 标准 模式 。 因 为 ， 在 较 新 
的 浏览 器 中 都 支持 W3C 标准 ， 而 且 无 论 是 否 支持 DOCTYPE 都 会 使 用 这 些 标准 。 

如 果 继 续 按照 老 版 本 浏览 器 的 要 求 设 计 网 页 ， 并 且 依赖 于 其 新 版 本 的 “怪异 ”模式 ， 那 么 
在 那些 不 支持 “怪异 ”模式 的 浏览 器 中 就 无 法 正常 工作 。 最 好 的 方法 是 按照 新 版 本 浏览 器 的 标 
准 模式 来 设计 ， 而 对 于 老 版 本 浏览 器 可 以 使 用 本 章 介绍 的 兼容 方法 来 修复 。 

使 用 如 下 的 DOCTYPE 声明 可 以 强制 浏览 器 支持 DOCTYPE 切换 (包括 下 6、Firefox 及 
Opera 7)， 使 其 转换 到 标准 模式 中 。 

@ HIML 4.01 过 渡 性 规范 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/htm14/1oose.dtd"> 

@ 支持 框架 的 HTML 4.01 规范 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/htm14/frameset .dtd"> 

@ XHTML 1.0 过 渡 性 规范 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www-w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


@ 支持 框架 的 XHTML 1.0 规范 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-frameset.dtd"> 


< 人 @——— 


[< 开发 学 习 实录 - 汪 


@ 严格 的 XHTML 1.0 规范 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtmll/DTD/xhtmll-strict.dtd"> 


@ XHTML 1.1 规范 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www-w3.-org/TR/xhtml11/DTD/xhtml111.dtd"> 


\ 
名 | 即使 在 DOCTYPE 语句 上 添加 注释 符号 ， 也 会 使 E 6 切换 到 “怪异 ”模式 。 


18.4.3 ”实例 描述 


如 采用 XHTML 和 CSS 开发 一 个 网 站 ， 然 后 在 正 各 版 中 对 其 进行 测试 ， 并 且 看 起 来 一 切 
正常 。 然 后 发 现在 基于 Mozilla 的 浏览 器 中 所 呈现 的 页 面 布局 与 在 下 中 的 效果 有 很 大 不 同 。 

那么 接 下 来 怎么 办 呢 ? 首先 要 检查 的 就 是 看 看 是 否定 义 了 DOCTYPE 定义 , 因为 它 直接 影 
响 W3C 标准 是 否 被 实现 。 

下 面 通过 一 个 实例 分 析 定义 DOCTYPE 前 后 页 面 效果 的 差别 。 


18.4.4 实例 应 用 


【 例 18-4】 选 择 合适 的 DOCTYPE 
(1) 打开 设计 好 的 后 台 网 站 。 在 未 添加 DOCTYPE 之 前 ， 先 在 浏览 器 中 查看 运行 效果 ， 如 
18-12 所 示 。 


有 和 | | 
( em 一 


EE 


[Hooder Here | Header |Head |Heater |Header| head Header |Heod 
“Lorem lpsur 已 日 互 2 EE 宇 中 


tirempum © © 日 


18-12 未 使 用 DOCTYPE 效果 


(2) 从 这 张 图 中 可 以 看 到 有 很 多 显示 错位 或 者 未 显示 的 地 方 。 比 较 明 显 的 有 如 下 几 处 : 

@ “首页 ”链接 应 该 在 一 行 显示 。 

@ “系统 设置 ”、“ 用 户 组 权限 ”和 “公告 管理 ”栏目 右 侧 图 片 未 显示 ， 以 及 位 置 不 对 。 
@ 最 右 侧 的 背景 没有 平 铺 显示 。 

@ ”中 部 表格 内 的 文字 字号 显示 不 正确 。 


sh) >> 
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(3) 打开 页 面 的 源 代码 ， 然 后 在 <HTML> 标 签 之 前 添加 DOCTYPE， 并 声明 XHTML 1.0 过 
渡 性 规范 。 代 码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN™" 
"http://www.w3.-org/TR/xhtml1/VDTD/xhtml11-transitional.dtd"> 


(4) 保存 对 HIML 页 面 的 修改 ， 完 成 实例 的 制作 。 


18.4.5 ”运行 结果 


再 次 打开 浏览 器 ,查看 使 用 DOCTYPE 之 后 的 运行 效果 , 可 以 看 到 之 前 出 现 的 不 一 致 问题 
得 到 了 修复 ， 如 图 18-13 所 示 。 


18-13 使 用 DOCTYPE 后 的 显示 效果 


18.4.6 ”实例 分 析 


ee 


使 用 CSS 设计 网 站 时 ， 如 果 发 现在 各 浏览 器 中 显示 的 效果 差别 很 大 ， 而 且 确认 CSS 没有 
错误 时 ， 添 加 DOCTYPE 声明 是 一 个 不 错 的 选择 ， 它 可 以 使 页 面 遵 循 W3C 标准 ， 保 持 显 示 效 
果 的 一 致 性 。 

但 是 要 注意 <IDOCTYPE> 标 签 没有 结束 标签 。 


18.5 CSS Bug 


与 许多 编程 语言 相 比 ，CSS 是 一 种 相对 容易 学 习 的 语言 。 它 的 语法 简单 明了 ， 而 且 由 于 它 
的 表现 本 质 ， 开 发 人 员 不 需要 处 理 复 杂 的 逻辑 。 但 是 ， 当 在 不 同 的 浏览 器 上 测试 代码 时 ， 问 题 
就 出 现 了 。 浏 览 器 Bug 和 不 一 致 的 显示 方式 是 大 多 数 CSS 开发 人 员 面临 的 主要 难题 。 你 的 设 
计 在 一 种 浏览 器 上 显示 的 很 好 ， 但 是 在 另 一 种 浏览 器 上 布局 可 能 会 “支离破碎 ”。 


< 全 一 


“CSS 难于 掌握 ”的 误解 并 不 来 源 于 语言 本 身 ， 而 是 由 于 为 了 让 站 点 在 所 有 主流 浏览 器 上 
正常 工作 需要 采取 很 多 措施 。 关 于 Bug 的 信息 很 难 找到 ， 缺 乏 文档 记录 ， 因 此 Bug 常常 被 
误解 。 

许多 人 把 CSS 技巧 看 作 魔 术 子 弹 ， 认 为 它们 就 像 神秘 的 咒语 一 样 ， 当 应 用 于 代码 时 ， 它 
们 会 神奇 地 修复 破碎 的 布局 。CSS 技巧 的 确 是 有 力 的 工具 ， 但 是 需要 谨慎 地 应 用 它们 ， 而 且 一 
般 是 作为 最 后 的 手段 来 使 用 。 更 为 重要 的 技能 是 跟踪 和 识别 Bug。 只 有 在 知道 一 个 Bug 是 怎么 
回 事 之 后 ， 才 能 想 办 法 对 付 它 。 


18.5.1 校 验 CSS Bug 


我 们 都 知道 浏览 器 是 有 Bug 的 ， 当 CSS 开发 人 员 在 自己 的 代码 中 遇 到 问题 时 ， 他 们 往往 
马上 就 认为 这 是 浏览 器 Bug， 并 且 应 用 适当 的 CSS 技巧 来 解决 。 但 是 浏览 器 的 Bug 并 没有 一 
般 人 认为 的 那么 常见 。 最 常见 的 CSS 问题 并 非 来 源 于 浏览 器 Bug， 而 是 来 源 于 对 于 CSS 规范 
的 理解 不 完整 。 

许多 开发 人 员 是 自学 的 CSS， 他 们 习惯 按照 自己 的 思维 模型 设计 页 面 。 当 某 些 东西 不 符合 
他 们 的 预期 时 ， 他 们 自然 而 然 地 把 这 归罪 于 浏览 器 ， 因 此 求助 于 某 个 CSS 技巧 来 解决 。 为 了 
避免 这 些 问 题 ,在 处 理 CSS Bug 时 最 好 假设 是 做 错 了 什么 事 。 只 有 在 确定 这 不 是 自己 的 错 之 后 ， 
才 应 该 考虑 问题 是 否 来 自 浏览 器 Bug。 

其 中 ， 最 简单 的 一 些 CSS 问题 是 由 代码 中 的 输入 错误 和 语法 错误 造成 的 。 防 止 这 种 Bug 
的 最 好 办 法 之 一 是 通过 CSS 校 验 器 运行 代码 。 它 会 发 现 所 有 的 输入 错误 ， 并 且 显 示 错 误 所 在 
的 行 和 对 每 个 错误 的 简短 描述 。 如 图 18-14 所 示 为 使 用 在 线 CSS 校 验 器 
(http://jigsaw.w3.org/css-validator) 的 结果 。 


寺 看 : 舌 各 4) 已 经 校 难 的 层 估 术 式 未 


W3C CSS 位 验 器 综 果 :。 httpJiwwwjtzcn com (CSS 版 本 2.1) 


的 吾 要 襄 ， 此 文档 已 经 肖 过 C55 质 本 2 1 校注! 
[2 


图 18-14 W3C CSS 校 验 器 的 结果 


在 校 验 自己 的 XHTML 和 CSS 时 ， 可 能 会 看 到 页 面 充 满 了 错误 。 这 看 上 去 会 使 人 感觉 非 
常 泪 形 ， 但 是 不 必 担 心 。 这 是 因为 大 多 数 的 错误 是 由 一 两 个 “真正 ”错误 导致 的 结果 。 如 果 修 
复 了 第 一 个 错误 并 且 重 新 运行 校 验 ， 可 能 会 看 到 原来 的 很 多 错误 消失 了 。 这 样 修改 几 次 后 ， 代 
码 很 快 就 没有 错误 了 。 
5 校 验 器 只 是 一 个 自动 化 工具 ， 并 不 是 完全 可 靠 的 。 校 验 器 报告 的 Bug 数量 正在 增 
提示 加 ， 所 以 可 能 你 认为 某 些 东西 是 对 的 ， 但 校 验 器 却 认为 是 错 的 ， 那 么 一 定 要 检查 
最 新 的 CSS 规范 。 
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18.5.2 ”捕捉 Bug 的 基本 步骤 


捕捉 CSS 的 Bug 的 第 一 步 是 检验 XHTML 和 CSS 是 否 存在 输入 和 语法 错误 。 某 些 显 示 错 
误 是 由 于 浏览 器 以 “怪异 ”模式 显示 页 面 造 成 的 。 因 此 ， 最 好 检查 是 否 正在 使 用 适合 自己 的 标 
记 语 言 的 DOCTYPE， 从 而 让 页 面 以 标准 模型 显示 。 关 于 这 一 点 ， 可 以 使 用 Firefox 浏览 器 很 
好 地 了 解 , 方法 是 执行 “工具 ”| “页面 信息 ”命令 , 在 弹出 的 窗口 中 查看 泻 染 模式 ,如 图 18-15 
所 示 。 


图 18-15 检查 “怪异 ”模式 或 是 标准 模式 


许多 开发 人 员 主 要 使 用 正 浏览 器 开发 页 面 ， 所 以 每 次 修改 页 面 之 后 ， 他 们 都 会 在 正 中 预 
览 页 面 ， 看 看 效果 是 否 正确 。 在 页 面 基 本 完成 之 后 ， 他 们 在 各 种 浏览 器 中 进行 测试 ， 并 修复 出 
现 的 任何 Bug。 但 是 ， 这 是 一 种 危险 的 做 法 ， 而 且 可 能 会 导致 很 多 长 期 的 问题 。 

这 是 因为 下 5 有 很 多 Bug 和 几 个 重要 的 CSS 缺陷 ， 包 括 它 处 理 浮动 的 方式 以 及 不 正确 的 
框 模式 实现 。IE 6 的 Bug 稍微 少 一 点 ， 但 是 仍然 有 很 多 Bug 和 不 一 致 的 地 方 。 由 于 使 用 正 作 
为 主要 的 开发 浏览 器 ， 很 多 开发 人 员 错 误 地 把 正 的 表现 当 作 正确 的 表现 ， 因 此 反而 奇怪 为 什 
么 标准 浏览 器 “破坏 了 ”他 们 精心 设计 的 CSS 布局 。 页 面 实际 上 是 在 下 中 被 “破坏 了 ”， 在 
标准 浏览 器 中 的 显示 方式 是 正确 的 。 

更 安全 的 方式 是 使 用 更 符合 标准 的 浏览 器 (例如 Firefox 或 者 Safari) 作 为 主要 的 开发 浏览 
器 。 如 果 你 的 布局 在 这 些 浏 览 器 中 工作 正常 ， 那 么 你 所 做 的 很 可 能 符合 正确 的 方式 。 然后， 可 
以 在 性 能 比较 差 的 浏览 器 中 测试 页 面 ， 并 且 为 发 现 的 任何 显示 问题 寻找 解决 方案 。 

1. 隔离 问题 

首先 ， 我 们 来 看 看 如 何 隔离 问题 。 通 过 隔离 问题 和 识别 症状 ， 可 以 查 明 是 什么 原因 导致 了 
这 个 问题 并 修复 它 。 其 中 ， 隔 离 问题 最 有 效 的 一 种 方法 是 在 相关 的 元 素 上 应 用 边框 ， 看 看 它们 
的 反应 。 

例如 ， 如 下 是 常见 的 边框 样式 : 


#redBoxf{ 
float:left; 


< 环 (人 mm 


[< 开发 学 习 实录 -各 


margin-right:S5px; 
border:lpx solid red; 
} 
#blueBox{ 
float:left; 
border:lpx solid blue; 
} 
不 过 ， 我 一 般 喜 欢 在 代码 中 直接 给 元 素 添加 边框 。 当 然 ， 也 可 以 使 用 浏览 器 提供 的 工具 来 
查看 元 素 的 轮廓 。 如 果 只 通过 添加 边框 就 能 修复 问题 ， 这 往往 说 明 存 在 空白 边 倒 加 的 问题 。 
第 二 种 方法 , 尝试 修改 几 个 属性 , 看 看 它们 对 Bug 有 什么 影响 , 是 以 什么 方式 产生 的 影响 。 
尝试 使 Bug 的 效果 扩大 化 可 能 是 有 帮助 的 。 例 如 ， 如 果 两 个 框 之 间 的 间隙 在 下 中 比 预期 的 大 ， 
那么 就 加 大 空白 边 ， 看 看 会 发 生 什么 情况 。 如 果 两 个 框 之 间 的 间 降 在 下 中 加 倍 了 ， 则 可 能 是 
遇 到 了 正 的 双 空白 边 浮动 Bug。 
#redBox{ 
float:left; 
margin-right:50px; 
border:lpx solid red; 


} 
#blueBox{ 
float:left; 
border:lpx solid blue; 

} 

另外 ， 可 以 尝试 一 些 常 见 的 解决 方案 。 例 如 ， 将 position 属性 设置 为 relative， 将 display 
属性 设置 为 inline( 在 浮动 元 素 上 ) 或 者 设置 宽度 和 高 度 等 尺寸 ， 就 可 以 修复 很 多 IE Bug。 

2. 创建 基本 测试 案例 

如 果 问 题 比较 棘手 ， 就 应 该 考虑 创建 一 个 基本 的 测试 案例 。 

要 创建 基本 的 测试 案例 ， 首 先 应 该 复制 出 问题 的 文件 。 删 除 多 余 的 XHTML， 直 到 只 留 下 
最 基本 的 内 容 。 然 后 注释 所 有 样式 表 ， 从 而 查 明 是 哪些 样式 表 导 致 了 这 个 问题 。 进 入 这 些 样式 
表 ， 注 释 或 者 删除 代码 块 。 如 果 Bug 突然 消失 了 ， 那 么 就 会 知道 是 刚 注释 的 最 后 一 块 代码 导致 
了 这 个 问题 。 继 续 注释 掉 代码 块 ， 直 到 只 留 下 造成 问题 的 代码 。 

然后 ， 就 可 以 开始 详细 研究 这 个 Bug。 删 除 或 者 注释 声明 ， 看 看 会 发 生 什么 。 这 个 修改 对 
Bug 有 什么 影响 ? 修改 属性 值 ， 看 看 问题 是 否 消失 了 。 使 用 一 些 常用 的 修复 方法 ， 看 看 它们 是 
否 有 效 。 编 辑 XHTML， 看 看 是 否 有 影响 。 使 用 不 同 的 XHTML 元 素 组 合 。 有 些 浏览 器 有 奇怪 
的 空格 Bug， 所 以 尝试 从 XHTML 中 删除 空格 。 

3. 修复 问题 

知道 问题 的 根源 ， 对 于 实现 正确 的 解决 方案 是 非常 有 利 的 。 因 为 给 站 点 应 用 CSS 样式 有 
许多 方式 ， 最 容易 的 解决 方案 是 干脆 回避 这 个 问题 。 

如 果 空 白 边 导 致 了 问题 ， 那 么 可 以 考虑 用 填充 来 代替 。 如 果 一 种 XHTML 元 素 组 合 导致 了 
问题 ， 那 么 可 以 考虑 换 一 种 组 合 。 

许多 CSS Bug 有 描述 性 非常 强 的 名 称 。 所 以 在 网 络 上 搜索 解决 方案 也 是 相当 容易 的 .例如 ， 
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如 果 注意 到 正 将 所 有 浮动 元 素 上 的 空白 边 加 倍 了 ， 那 么 搜索 “IE 双 倍 边 距 Bug” 就 会 找到 解 
决 方案 。 

如 果 发 现 无 法 回避 这 个 Bug， 那 么 可 能 不 得 不 设法 消除 症状 。 这 往往 涉及 寻找 一 个 影响 出 
问题 的 浏览 器 的 过 滤器 ， 并 且 向 这 个 浏览 器 提供 单独 的 规则 。 


4. 寻求 帮助 


如 果 通 过 以 上 步骤 还 没有 找到 解决 办 法 ， 那 么 就 开始 寻求 帮助 吧 。 即 使 是 最 有 经 验 的 开发 
人 员 ， 也 可 能 遇 到 以 前 没有 见 过 的 问题 。 有 时 候 和 其 他 的 开发 人 员 探讨 这 些 问 题 会 帮助 你 解决 
它 ， 即 使 他 们 可 能 无 法 马上 给 出 具体 的 解决 方案 ， 可 能 也 会 提出 一 些 新 的 值得 一 试 的 方法 。 

但 是 ， 如 果 你 决定 将 问题 发 到 论坛 或 者 其 他 途径 时 ， 应 该 记 住 以 下 原则 。 

(1) 如 果 论 坛 提供 了 精华 区 ， 那 么 应 该 首先 在 精华 区 中 搜索 该 问题 ， 以 免 提 出 一 个 以 前 已 
经 解决 过 的 问题 。 

(2) 确保 你 的 CSS 和 XHTML 代码 是 有 效 的 ， 否则 你 可 能 会 得 到 类 似 “ 验 证 一 下 文档 的 有 
效 性 ， 看 看 是 否 有 帮助 ”的 回答 。 

(3) 将 一 个 错误 实例 上 传 到 帖子 可 以 链接 的 位 置 。 如 果 可 以 在 一 个 复杂 的 页 面 布局 之 外 重 
现 这 个 问题 ， 那 是 最 好 的 。 这 样 会 使 其 他 人 更 易于 找到 解决 办 法 。 

(4) 说 明 你 已 经 尝试 过 的 解决 方法 。 这 样 ， 就 可 以 节省 那些 看 到 你 帖子 的 人 的 时 间 ， 避 免 
陷入 和 你 相同 的 死胡同 ， 并 说 明 在 寻找 帮助 前 你 已 经 尝试 着 自己 动手 解决 这 个 问题 。 

(5) 为 你 的 帖子 创建 一 个 描述 性 的 标题 。 标 题 为 “在 下 7 中 的 盒子 模式 重复 显示 了 ”的 帖 
子 要 比 “ 请 求 帮助 ! ”更 容易 吸引 人 们 的 眼球 ， 好 的 主题 也 能 让 精华 区 列表 更 有 用 ， 人 们 只 看 
到 标题 就 能 大 致 了 解 其 内 容 。 

(6) 在 描述 内 容 时 应 该 礼貌 ， 内 容 应 简明 扼要 。 

(7) 在 等 待 回 答 时 要 有 耐心。 如果 一 天 之 后 还 没收 到 任何 回复 ， 通 常 可 以 再 发 一 次 帖子 。 
如 果 讨 论 版 块 特别 大 ， 帖 子 很 可 能 没 人 注意 到 ， 这 是 一 种 提醒 大 家 你 的 问题 还 没有 收 到 任何 回 
复 的 友好 提示 。 

(8) 当 你 收 到 回复 时 ， 应 尝试 回复 者 的 建议 。 如 果 他 的 建议 不 起 作用 ， 或 者 建议 你 尝试 一 
些 基 本 的 方法 , 也 不 要 生气 。 我 经 常 看 到 很 多 帖子 吸引 大 量 的 人 参与 , 尝试 帮助 某 人 解决 问题 ， 
直到 找到 解决 方法 为 止 。 请 给 人 们 一 个 提供 帮助 的 机 会 。 

(9) 如 果 你 找到 了 解决 方法 ， 或 者 决定 修改 设计 以 避免 该 问题 ， 应 该 发 一 个 帖子 说 明 你 是 
如 何 解决 的 ,或 者 如 何 避 免 的。 这 样 对 帮助 过 你 的 人 而 言 才 显得 礼貌 ， 同 时 也 对 于 那些 遇 到 相 
同 问题 并 从 精华 区 中 搜索 信息 的 人 更 有 帮助 。 当 人 们 在 精华 区 中 搜索 针对 特定 问题 的 解决 方法 
时 ， 如 果 找 了 几 种 可 能 的 方法 ， 但 却 不 知道 哪个 是 可 行 的 ， 会 有 很 大 的 挫折 感 。 


18.6 CSS 建议 


要 想 写 出 兼容 性 好 ， 不 容易 出 错 的 CSS 样式 规则 ， 需 要 读者 经 常 练习 CSS， 在 练习 中 逐 
渐 掌 握 CSS 规则 ， 并 形成 习惯 。 下 面 给 出 了 一 些 定义 CSS 规则 时 的 建议 及 规范 。 

(1) 使 用 子 选择 器 (descendant selectors) 

CSS 初学 者 不 知道 使 用 子 选择 器 是 影响 他 们 效率 的 原因 之 一 。 子 选择 器 可 以 帮助 你 节约 大 
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量 的 class 定义 。 我 们 来 看 下 面 这 段 代 码 : 
<div id=subnav> 
<ul> 
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></1i>> 
<1i class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> 
LS 
<1li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </1i> 
</ul> 
</div> 


这 上段 代码 的 CSS 定义 如 下 : 

div#subnav ul { /* Some styling */ } 

div#subnav ul li.subnavitem { /* Some styling */ } 

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } 


div#subnav ul li.subnavitemselected { /* Some styling */ } 
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 


可 以 用 下 面 的 方法 替代 上 面 的 代码 : 


<ul id=subnav> 

<1i> <a href=#> Item 1</a> </1i> 

<1i class=sel> <a href=#> Item 1</a> </1i> 
<1i> <a href=#> Item 1</a> </1i> 

</ul> 


CSS 样式 定义 如 下 ， 这 样 用 子 选择 器 可 以 使 代码 和 CSS 更 加 简洁 、 更 加 容易 阅读 。 


#subnav { /* Some styling */ } 
#subnav li { /* Some styling */ } 
#subnav a { /* Some styling */ } 
#subnav .sel { /* Some styling */ } 
#subnav .sel a { /* Some styling */ } 


(2) 取消 class 和 id 前 的 元 素 限 定 
当 你 希望 给 一 个 元 素 定义 class 或 者 id 时 ， 可 以 省 略 前 面 的 元 素 限定 ， 因 为 id 在 一 个 页 面 
中 是 唯一 的 ， 而 class 可 以 在 页 面 中 多 次 使 用 。 仅 仅 限定 某 个 元 素 毫 无 意义 。 例 如 : 


div#content { /* declarations */ } 
fieldset .details { /* declarations */ } 


可 以 写成 如 下 形式 ， 省 略 一 些 字 节 。 


#content { /* declarations */ } 
.details { /* declarations */ } 


(3) 默认 值 

通常 padding 的 默认 值 为 0，background-color 的 默认 值 是 transparent。 但 是 在 不 同 的 浏览 
器 中 的 默认 值 可 能 不 同 。 如 果 怕 引起 冲突 ， 可 以 在 样式 表 一 开始 就 先 定义 所 有 元 素 的 margin 
和 padding 值 都 为 0， 如 下 面 代码 所 示 : 
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Ac 
margin:0; 
padding:0; 
I 


(4) 最 近 优先 原则 

如 果 对 同一 个 元 素 的 定义 有 多 种 ， 以 最 接近 (最 小 一 级 ) 的 定义 为 最 优先 ， 例 如 有 这 样 一 段 
代码 : 

Update: Lorem ipsum dolor set 

在 CSS 文件 中 ， 已 经 定义 了 元 素 p， 又 定义 了 一 个 class update: 


pi 

margin:lem 0; 
font-size:lem; 
Color:#333; 

下 

-update { 
font-weight:bold; 
color:#600; 

} 


这 两 个 定义 中 ，class=update 将 被 使 用 ， 因 为 update 样式 比 p 样式 更 接近 p 元 素 。 
(5) 区 分 大 小 写 
若 在 XHTML 中 使 用 CSS， 因 CSS 里 定义 的 元 素 名 称 是 区 分 大 小 写 的。 为 了 避免 这 种 错 
建议 所 有 的 定义 名 称 都 采用 小 写 。 
class 和 id 的 值 在 HTML 和 XHTML 中 也 是 区 分 大 小 写 的 ， 如 果 一 定 要 大 小 写 混合 写 ， 请 
仔细 确认 在 CSS 中 的 定义 和 XHTML 中 的 标签 是 一 致 的 。 

(6) 明确 定义 单位 ， 除 非 值 为 0 

忘记 定义 尺寸 的 单位 是 CSS 新 手 普遍 容易 出 现 的 问题 。 在 HTML 中 可 以 只 写 width=100， 
但 是 在 CSS 中 ， 必 须 给 一 个 准确 的 单位 ， 例 如 : width:100px width:100em。 只 有 两 个 例外 情况 
可 以 不 定义 单位 : 行 高 和 0 值 。 除 此 以 外 ， 其 他 值 都 必须 定义 单位 。 注 意 ， 不 要 在 数值 和 单位 
之 间 加 空格 。 

(7) 不 需要 重复 定义 可 继承 的 值 

CSS 中 子 元 素 自动 继承 父 元 素 的 属性 值 (如 颜色 、 字 体 等 )， 已 经 在 父 元 素 中 定义 过 的 。 在 
子 元 素 中 可 以 直接 继承 ， 不 需要 重复 定义 。 但 是 要 注意 ， 浏 览 器 可 能 用 一 些 默认 值 覆 盖 你 的 

(8) 多 重 class 定义 

一 个 标签 可 以 同时 定义 多 个 class。 例 如 : 我 们 先 定义 两 个 样式 ， 第 一 个 样式 背景 为 #666， 
第 二 个 样式 有 10 px 的 边框 。 

.one{width:200px;background:#666;} 

.two{border:10px solid #F00;} 


在 页 面 代码 中 ， 我 们 可 以 这 样 调用 


<div class=one two></div> 


误 


< 


这 样 最 终 的 显示 效果 是 这 个 div 既 有 “#666” 的 背景 ， 也 有 “10px” 的 边框 。 
(9) 使 用 CSS 缩写 。 使 用 缩写 可 以 帮助 减少 CSS 文件 的 大 小 ， 更 加 容易 阅读 。 


18:7:1 


我 的 
浏览 器 看 
底 是 什么 


18.7 ”常见 问题 解答 


CSS 样式 表 显示 问题 


CSS 样式 表 在 不 同 电脑 的 浏览 器 上 显示 不 正常 。 

网 络 课堂 : http:Wbbs.itzcn.comythread-11893-1-1.html 
网 站 运用 了 大 量 的 CSS， 在 我 的 电脑 上 显示 正常 。 可 是 放 到 同学 的 电脑 上 ， 用 同样 的 
网 页 ， 结 果 显 示 就 是 错乱 的 ， 而 在 有 的 同学 的 电脑 上 是 可 以 正常 显示 的 。 不 知道 这 到 


【解决 办 法 】 一 般 是 兼容 性 、 编 码 格式 、 浏 览 器 版 本 ， 还 有 浏览 器 设置 方面 的 问题 。 根 据 
这 些 看 看 你 和 你 同学 电脑 中 的 两 个 浏览 器 有 什么 不 同 。 


另外 


需要 对 不 同 的 浏览 器 写 不 同 的 CSS 样式 ( 即 css hack) 来 兼容 ， 使 其 效果 一 致 ， 并 在 不 


同 的 主流 浏览 器 上 测试 才 行 ， 如 下 6 以 上 的 版 本 、Firefox、opera、chrome、Safari 等 。 


18:72 


我 的 


CSS 固定 div 的 兼容 性 问题 


CSS 固定 div 的 兼容 性 问题 ? 
网 络 课堂 : http://bbs.itzcn.com/thread-11894-1-1.html 


HTML 页 面 中 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS 实现 位 置 固定 的 DIV</title> 

<style type="text/css"> 

-aa{height:2000px;width:40px;background:#eee;} 
.bb{width:50px;height:80px;background:red;float:right;position:fixed !impor 
tant top/**/:10px;position:absolute; z-index:100; right:20px;} 
</style> 

</head> 

<body> 


<div class="aa"> 


我 是 不 动 的 


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br 


sn) > 
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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b 
r><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>< 
br><br><br><br><br><br><br><br><br><br><br><br><br><br> 


</div> 

<div class="bb"> 兼 容 Ff 和 IE</div> 

</body> 

</html> 

在 正 7 及 FireFox 中 执行 正常 ， 为 什么 在 正 6 中 无 法 执行 ? 

【解决 办 法 】 这 个 就 是 典型 的 浏览 器 兼容 问题 。 

position:fixed !important 这 里 的 fixed 和 important 优先 在 正 6 中 是 无 效 的。 所 以 , 在 正 6 

中 bb 样式 的 position 属性 是 后 面 定义 的 position:absolute， 只 浮动 而 不 固定 位 置 。 


18.7.3 简单 菜单 的 兼容 性 


加” 网络 课堂 : http://bbs.itzcn.com/thread-11895-1-1.html 

我 用 div+CSS 做 的 网 页 存在 兼容 性 的 问题 ， 该 如 何 解决 呢 ? IE 6 中 显示 正常 ， 而 在 正 7、 
IE 8 中 都 是 乱 的 。 

另外 在 调试 网 页 时 ，IE 6、 下 7、IE 8 怎么 才能 装 在 一 台电 脑 上 进行 调试 ? 

【解决 办 法 】 现 在 大 的 网 站 都 已 经 放弃 了 E 6 了， 也 该 是 下 6 退出 浏览 器 舞台 的 时 候 了 ， 
不 过 ， 国 人 还 有 很 多 在 使 用 IE 6。 

其 实 IE 8 的 兼容 性 已 经 可 以 和 Firefox 相 媲 美 ， 不 过 在 实际 应 用 过 程 中 还 应 该 针对 IE 8 
做 兼容 工作 。 例 如 ， 如 下 的 代码 : 


#tip { 

background:blue; /*Firefox 识别 */ 
background:blue\9; /*ie8 识别 */ 
*background:green !important; /*IE7 识别 */ 
*background:orange; /*IE6 识别 */ 

和 


按照 这 个 在 你 的 代码 里 一 个 一 个 调试 。 推 荐 一 款 叫 IEtester 的 正 调试 工具 ， 非 常 不 错 ， 我 
一 直 在 用 ， 和 希望 对 你 有 帮助 。 


18.7.4 CSS 在 IE 和 FF 中 的 兼容 性 问题 


CSS 在 IE 和 FF 中 的 兼容 性 问题 。 
网 络 课堂 : http://bbs.itzen.com/thread-11896-1-1.html 
使 用 CSS 设计 了 一 个 菜单 ， 下 面 是 菜单 的 主要 样式 和 HTML 代码 : 


<style type="text/css"> 
Wl lirarhSt padding:0; margin:0; } 


< 人 mm 


ke Web 开 发 学 习 实录 - 


a{ cursor:pointer;} 
li{ float:left; 
1 
Ta 
li a ulf{ 
1 
#nav 1i 
</style> 
<h3> 显 示 菜单 </h3> 
<ul id="nav"> 
<1i> 
<a href="#"> 
<h5> 主 菜单 1</h5> 
<ul> 
<1i> 子 菜单 项 11 </1i> 
<1i> 子 菜单 项 12</1i> 
<1i> 子 菜单 项 13</1i> 
<1i> 子 菜单 项 14</1i> 
</ul> 
</a> 
</1i> 
<l1i> 
<a href="#"> 
<h5> 主 菜单 2</h5> 
<ul> 
<1i> 子 菜单 项 21</1i> 
<1i> 子 菜单 项 22</1i> 
<1i> 子 菜单 项 23</1i> 
<1i> 子 菜单 项 24</1i> 
</ul> 
</a> 
</1i> 
</ul> 


有 下 面 两 个 问题 : 


#nav 
#nav 
#nav 
#nav 
#nav 


(1) 在 上 述 代码 中 的 CSS 部 分 ， 如 果 把 #nav li ul{*display:none; } 语 句 中 的 * 号 去 掉 ， 则 可 
以 在 Firefox 中 隐藏 标记 中 的 菜单 。 但 是 ， 当 将 鼠标 移动 到 a 标记 上 时 ， 则 #nav li a:hover 伪 


类 将 不 显示 。 


list-style-type:none; 


display:block; } 
*display:none; } 
display:none; } 
a:hover{ background:#fff; } 
a:hover ul{ display:block; position:absolute; 


padding:5px; } 


\left:10px;} 


(2) 把 a:hover 里 的 background:#fff; 去 掉 ， 或 改 成 其 他 属性 ， 则 不 正常 ， 为 什么 ? 


【解决 办 法 】 先 不 说 其 他 的 ， 一 看 代码 就 明白 了 。 标 题 样 式 是 不 能 用 在 列表 中 的 ， 如 果 需 


要 使 用 同 标题 相同 的 样式 ， 那 就 直接 用 CSS 来 设置 样式 。 
而 你 却 把 标题 这 么 重要 的 标签 放 在 <li> 和 </li> 之 间 了 。 


< 
<a href="#"> 
<h5>aaaaaa</h5> 
<ul> 


<li>aaaaaa </1i> 
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<li>aaaaaaf </1i> 
<1i>alllll </1i> 
<1li>alllll </1i> 


</ul> 
过 大 > 
人 让 
这 样 做 是 不 允许 的 。 当 然 ， 也 不 是 说 你 这 样 写 就 一 定 不 行 。 但 由 于 浏览 器 的 不 同 带 来 的 样 
式 和 效果 也 不 相同 。 


这 不 是 严格 不 严格 的 问题 ， 而 是 兼容 不 兼容 的 问题 。 你 的 网 页 要 想 让 更 多 的 人 看 就 一 定 要 
尽 可 能 地 减少 这 种 代码 上 的 错误 。 如 果 代码 正确 率 高 ， 给 不 同 浏览 器 带 来 的 差别 就 会 小 很 多 。 
这 样 ， 就 算是 有 了 小 问题 ， 自 己 试 试 或 到 这 里 问 问 ， 也 就 能 很 快 解决 了 。 


18.8 习 题 


1. 填空 题 
(1) 使 用 CSS 条 件 注释 中 的 表达 式 可 以 判断 IE 浏览 器 版 本 是 小 于 或 等 于 某 个 
版 本 。 
(2) 只 有 普通 文档 流 中 区 块 的 垂直 空白 边 才 会 发 生 登 加， 对 于 、 浮 动 块 或 
之 间 的 空白 边 是 不 会 登 加 的 。 
(3) 使 用 来 解决 闭合 浮动 元 素 时 ,需要 设置 为 hidden 或 者 auto。 如 果 在 IE6 下 ， 
还 需要 指定 高 度 或 者 
(4) DOCTYPE 可 声明 三 种 DTD 类 型 ， 分 别 表 示 严 格 版 本 、 以 及 基于 框架 的 
HTML 文档 。 
2. 选择 题 
(1) 使 用 可 以 区 分 正 浏览 器 版 本 的 语法 。 
A， 空 白 边 登 加 B. 闭合 浮动 元 素 
C. DOCTYPE D. 条件 注 释 
(2) 如 果 当 前 浏览 器 版 本 大 于 6， 则 连接 other.css， 应 该 选择 
二 


<!--[if gte IE 6]> 
<LINK href="other.css" type="text/css" rel="stylesheet"> 
xslendrEl 一 光 


WN 


<I-=1if IE 6]> 
<LINK href=" other.css" type="text/css" rel="stylesheet"> 
sylenadifle=> 


< 全 ——— 


'* 开发 学 习 实录 


C. 


<!--[if gt IE6]> 
<LINK href=" other.css" type="text/css" rel="stylesheet"> 
<llendif]-—-> 


D. 


<1=11E Tt ER 61> 
<LINK href=" other.css" type="text/css" rel="stylesheet"> 
<!l[lendif]--> 


(3) 当 两 个 重 直 空白 边 相 遇 时 ,它们 将 形成 一 个 空白 边 。 这 个 空白 边 的 高 度 等 于 两 个 发 生 


登 加 的 空白 边 中 的 

A. 较 小 者 B. 较 大 者 C. 平均 值 D. 之 和 
(4) 浮动 元 素 之 所 以 未 闭合 是 由 属性 引起 的 。 

A. float B. overflow C. position D. padding 
(5) 要 实现 闭合 浮动 元 素 ， 下 面 方式 不 可 选 。 

A， 使 用 <div style="clear:both;"></div> ”B. 使 用 after 伪 类 

C. 浮动 外 部 元 素 D. 使 用 width:100% 
(6) 支持 框架 的 XHTML 1.0 规 范 使 用 DOCTYPE 应 该 遵循 DTD. 


A. http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd 
B. http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd 

C. http://www.w3.org/TR/xhtmll1l/DTD/xhtmlll.dtd 

D. http://www.w3.org/TR/html4/frameset.dtd 


3. 上 机 练习 


上 机 练习 : 解决 页 面 显示 不 正常 的 问题 
现在 有 一 个 HTML 页面， 在 IE 8 中 的 运行 效果 如 图 18-16 所 示 。 从 图 中 可 以 看 到 页 面 显 


示 不 正常 ， 这 就 要 求 读者 应 用 本 章 所 学 到 的 知识 ， 在 不 改变 HTML 的 布局 的 情况 下 进行 修复 。 


同 EsseeowauaFRR 由 VS 而 NENl sn tl Sx 


会 WR 天 乱 无 5 入 价 - 目 - 口 滞 - 0-220- IAO- OD- 


18-16 ”运行 效果 
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内 容 摘要 : 

窗 内 网 (www.itzcn.com) 是 一 个 免费 的 在 线 视频 教育 平台 ， 它 结合 了 软件 开发 的 实际 需求 ， 
发 布 了 Flex、C#、Java、ASP.NET、PHP 和 JSP 等 系列 视频 教程 。 与 此 同时 ， 线 下 的 图 书 编辑 
业务 也 在 大 量 推广 。 很 多 同学 因为 看 过 在 线 视频 以 后 找 不 到 对 应 的 教材 进行 同步 学 习 ， 所 以 他 
们 在 网 站 上 提出 了 建 一 个 在 线 书店 的 建议 ， 甚 至 有 热心 的 网 友 帮 我 们 设计 好 了 页 面 的 风格 。 

下 面 我 们 就 把 网 友 提 供 的 页 面 设计 图 使 用 div+CSS 技术 做 成 一 个 静态 的 页 面 , 也 同时 练习 
一 下 我 们 学 习 的 CSS 技术 。 

学 习 目 标 : 
掌握 页 面 布局 的 设计 方法 
掌握 使 用 CSS 控制 div 布局 的 方法 
掌握 元 素 定位 的 方法 
掌握 使 用 CSS 对 页 面 对 象 设置 样式 的 方法 


bss we 开发 学 习 实录 # 


st >> 


19.1 案例 效果 图 分 析 


HTML 页 面 其 实 是 由 一 个 个 文字 、 图 片 、 动 画 等 基本 元 素 组 成 的 。 将 它们 放置 在 页 面 标签 
中 ， 再 使 用 CSS 样式 设置 以 后 才能 形成 美 轮 美 负 的 页 面 。 

从 拿 到 一 张 页 面 设计 图 开始 ， 我 们 就 定 下 了 一 个 目标 : 要 使 用 CSS 样式 操纵 页 面 元 素 组 
成 一 个 漂亮 的 艺术 品 。 

我 们 首先 要 对 这 张 设计 图 进行 分 解 ， 一 块 块 地 划分 ， 直至 分 成 最 小 的 再 不 可 分 割 的 元 素 为 
止 。 就 像 一 个 拿 着 刻 刀 的 孩子 ， 一 刀 刀 地 把 这 张 图 切割 成 我 们 想 要 的 结果 。 

下 面 我 们 就 来 实施 这 个 计划 。 页 面 设计 的 最 终 效 果 如 图 19-1 所 示 。 


区 本 目 目 
Itzcn 书 店 [ | 


今 优惠 图 书 三 图 书 分 类 


图 19-1 页 面 效 果 图 


19.1.1 划分 页 面 主 体 框架 


通过 仔细 分 析 图 19-1 可 以 看 出 ， 页 面 中 所 有 的 内 容 都 居中 显示 在 中 间 900 像素 宽 的 内 容 
区 域 ， 所 以 需要 创建 一 个 总 的 内 容 容 器 用 于 盛 放 所 有 的 元 素 。 
页 面 中 的 内 容 区 域 可 以 根据 各 区 域 间 明 显 的 界线 分 为 上 、 中 、 下 三 个 大 的 区 域 ， 其 中 上 奋 
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的 区 域 包含 的 内 容 如 图 19-2 所 示 。 


A 


Itzcn 书 店 


图 19-2 ”页面 顶部 
下 面 的 区 域 包含 的 内 容 如 图 19-3 所 示 。 
ITZCN 书 上 店 
@ITZzcN 
图 19-3 页 面 底部 


当然 ， 剩 余 的 就 是 中 间 区 域 的 内 容 了 。 
总 体 来 说 整个 页 面 的 主体 框架 如 图 19-4 所 示 。 


header 


body 


footer 
19-4 页 面 主体 框架 


19.1.2 分析 项 部 模块 


页 面 项 部 区 域 结构 非常 简单 ， 主 要 分 为 上 部 的 形象 区 域 和 下 面 的 菜单 条 两 部 分 。 

当然 ， 上 面 的 形象 区 域 与 页 面 浑然 一 体 ， 不 可 能 会 经 常 变 化 ， 所 以 可 以 整体 作为 一 张 图 片 
进行 处 理 ， 简 单方 便 。 不 过 作为 站 点 Logo 的 “itzcn 书店 ”字样 需要 单独 处 理 ， 所 以 要 求 可 以 
单独 操作 。 而 下 面 的 菜单 条 可 以 设计 为 一 个 横向 排列 的 列表 。 所 以 ， 整 个 顶部 模块 的 页 面 结构 
如 图 19-5 所 示 。 


| go banner 


menubar ] 


19-5 ”页 面 项 部 结构 


<@——— 
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19.1.3 ”分 析 底 部 模块 


底部 模块 更 加 简单 ， 主 要 有 靠近 左 侧 的 Logo 展示 区 和 靠近 右 侧 的 导航 链接 区 。 然 后 就 是 
底下 一 条 呼应 顶部 主题 的 修饰 线条 了 。 
所 以 ， 整 个 底部 的 结构 如 图 19-6 所 示 。 


L_amav | 


logo 


19-6 页 面 底部 结构 


19.1.4 分析 页 面 主体 部 分 结构 


页 面 中 间 内 容 区 域 的 结构 比较 清晰 ， 但 是 由 于 内 容 较 多 ， 所 以 相对 来 说 也 比较 复杂 。 但 是 
从 直观 感觉 上 可 以 先 分 为 左 、 右 两 大 部 分 ， 如 图 19-7 所 示 。 


body_left body_right 


19-7 ”页面 内 容 区 主体 框架 


不 过 ， 由 于 页 面 主体 部 分 内 容 背景 比较 统一 ， 可 以 纵向 重复 ， 所 以 为 了 节省 代码 ， 可 以 将 
页 面 主体 部 分 作为 一 个 整体 设置 背景 。 这 样 不 仅 便于 管理 ， 也 节省 了 代码 量 。 

1. 页 面 主体 部 分 左 侧 结构 设计 

页 面 主体 部 分 左 侧 的 内 容 结 构 比较 简单 ， 只 需要 “好 书 推荐 ”和 “新 书 上 架 ” 两 个 模块 。 
在 “好 书 推荐 ”模块 中 ， 两 条 记录 纵向 显示 ， 所 以 不 用 刻意 进行 布局 ， 而 “新 书 上 架 ” 模 块 中 
有 三 项 数据 ， 横 向 排列 ， 这 里 可 以 使 用 一 个 容器 来 存放 它们 。 

所 以 页 面 主体 部 分 左 侧 结构 可 以 设计 成 如 图 19-8 所 示 的 页 面 布局 。 

”这 里 为 了 节省 篇 幅 ， 就 不 再 深入 地 对 每 一 个 小 模块 进行 分 解 了 ， 详 细 的 分 析 会 在 
旦 去 | ”页 面具 体 实现 的 时 候 进行 讲解 。 


2. 页 面 主体 部 分 右 侧 结 构 设 计 


相对 于 主体 部 分 的 左 侧 结构 来 说 ， 右 侧 模块 有 些 复杂 。 
首先 它 有 5 个 主要 的 栏目 : “购物 车 ”、“ 关 于 书店 ”、“ 优 惠 图 书 ”、“ 图 书 分 类 ”和 
“友情 链接 ”， 而 且 每 个 栏目 的 内 容 也 不 是 很 多 ,所 以 布局 设计 得 比较 紧凑 ,结构 也 比较 合理 。 


>> 
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19-8” 左 侧 布局 设计 


总 体 来 说 ， 右 侧 共 分 为 上 、 中 、 下 三 大 块 ， 其 中 下 面 又 分 为 左 、 右 两 个 部 分 ， 然 后 右边 又 
分 为 上 、 下 两 个 模块 ， 比 较 纠结 。 

不 过 这 些 模块 并 不 复杂 ， 而 且 界 线 比较 清晰 ， 可 以 直接 使 用 五 个 模块 进行 拼凑 组 合 到 一 起 

所 以 ， 页 面 主体 部 分 右 侧 的 模块 结构 可 以 设计 成 如 图 19-9 所 示 的 样子 。 


cart 


19-9 右 侧 布局 设计 


< 人 mm 


》$ ”或许 这 种 方式 并 不 是 最 佳 方 案 ， 它 没有 多 级 谋 套 容易 控制 ， 但 这 样 会 在 很 大 程度 
提示 上 简化 页 面 结构 ， 所 以 我 们 采用 这 种 方式 来 实现 。 


19.2 ”站 点 目录 结构 


要 想 很 好 地 理解 下 面 将 要 讲 的 程序 ， 我 们 必须 先 了 解 站 点 的 目录 结构 。 

本 实例 使 用 的 开发 工具 是 Dreamweaver。 首 先 在 Dreamweaver 中 的 文件 管理 窗口 中 新 建 一 
个 站 点 ， 名 为 ItzcenBookStore。 该 站 点 下 面 有 三 个 目录 ， 用 于 分 别 存放 页 面 中 的 资源 文件 。 

下 面 看 一 下 Dreamweaver 中 的 文件 管理 窗口 中 的 目录 结构 ， 如 图 19-10 所 示 。 


EE 


文件 夫 nlcrl2-l6 6:36 ~ 
4 至 委 科 式 表 . 2010-12-16 16:40 

文 疾 严 anlCl2-18 16:36 ~ 

文 从 灾 201Cr12-18 16:36 ~ 


T3000WRL 201CI2-18 11:02 


EE J 


图 19-10 目录 结构 


文件 管理 窗口 中 的 三 个 子 目 录 的 作用 说 明 分 别 如 下 。 

@ css: 用 于 存放 CSS 样式 表 文件 。 

@ imgs: 用 于 存放 控制 页 面 风格 要 用 到 的 样式 图 片 。 
@ ”pics: 用 于 存放 网 页 中 的 内 容 图 片 。 

最 后 ， 站 点 的 HTML 页 面 文件 统一 放置 在 站 点 根 目录 下 。 


19.3 页 面 框架 布局 设计 


前 面 说 过 ， 我 们 的 页 面 框架 总 体 分 为 上 、 中 、 下 三 个 大 的 模块 ， 在 中 间 的 内 容 区 域 模块 中 
又 主要 分 为 左右 两 个 子 模块 。 所 以 ， 页 面 主 体 框架 可 以 设计 成 如 图 19-11 所 示 的 结构 。 


19-11 页 面 主体 框架 结构 


De 
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根据 图 中 的 结构 设计 ， 可 以 在 页 面 中 添加 如 下 的 HIML 代码 : 


<div id="container"> 
<div id="header"> </div> 


<div id="body" class="clear"> 
<div id="body left"> </div> 
<div id="body right"> </div> 
</div> 
<div id="footer"> </div> 
</div> 
在 页 面 中 ，container 是 一 个 主 容器 ， 里 面包 含 header、body 和 footer 三 个 子 容器 ， 其 中 在 
body 容器 中 又 包含 body_left 和 body_right 两 个 容器 。 
， 因为 body 容器 中 的 两 个 子 容器 需要 横向 显示 ， 并 将 会 为 它们 设置 浮动 效果 。 为 了 
注意 处 理 浮动 后 的 页 面 布局 混乱 的 问题 ， 我 们 为 body 容器 添加 了 一 个 clear 样式 ， 用 
于 统一 处 理 页 面 中 包含 浮动 元 素 的 容器 样式 。 
接 下 来 需要 为 页 面 主 框架 中 的 元 素 设 置 相应 的 样式 。 
首先 在 css 目录 中 创建 一 个 样式 表 文 件 ， 可 以 根据 各 自 的 需求 命名 ， 这 里 命名 为 style.css。 
然后 在 页 面 中 的 head 部 分 使 用 link 元 素 引 入 该 样式 表 文件 ， 代 码 如 下 : 
<link rel="stylesheet" type="text/css" href="css/style.css"> 


然后 在 样式 表 中 添加 相应 的 CSS 样式 代码 。 
下 面 代码 是 对 整个 页 面 进行 的 一 些 设置 : 
html, body, div, ul, img { 

margin:0; 

padding:0; 


} 

img { 
border:0; 

} 

body { 
background-color:#6F605A; 
font-family: "= 宋体 Arials 
font-size:12px; 

} 

.clear:after { 
contente™ "sy 
clear:both; 
display: block; 
height:0; 
visibility:hidden; 

} 


这 里 设置 了 页 面 中 的 html 元 素 、body 元 素 、div 元 素 、ul 元 素 、img 元 素 的 边 距 和 填充 默 
认 值 都 为 0; 然后 设置 了 img 元 素 的 边框 为 0， 避免 使 用 超 链接 后 出 现 一 个 难看 的 蓝 框 ;接着 


< 人 @———— 


设置 页 面 的 背景 色 、 字 体 、 字 号 等 属性 ， 最 后 定义 了 一 个 clear 类 样式 ， 设 置 最 后 一 个 子 元 素 
的 内 容 为 一 个 圆 点 ， 并 清除 两 侧 的 元 素 浮动 属性 ， 显 示 为 一 个 块 元 素 ， 高 度 为 0， 而 且 将 其 设 
置 为 隐藏 。 
下 面 我 们 再 为 页 面 框架 添加 CSS 样式 。 
首先 页 面 主 容器 元 素 的 样式 定义 如 下 : 
#container { 
width:900px; 
margin:auto; 
background-color:#FFFFFF; 
这 里 设置 页 面 内 容 区 宽度 为 900 像素 ， 边 距 为 自动 ， 背 景色 为 白色 。 
然后 设置 页 面 头 部 的 样式 ， 代 码 如 下 : 
#header { 


background-image:url(../imgs/header.jpg); 
height:181px; 


E 


这 里 定义 了 页 面 头 部 的 背景 和 高 度 。 因 为 div 宽度 默认 是 100%， 所 以 不 用 控制 它 的 宽度 
属性 。 
接 下 来 需要 设置 页 面 主体 部 分 的 样式 ， 代 码 如 下 : 
#body { 
background-image:url(../imgs/center bg.gif); 
} 
页 面 主体 部 分 内 容 不 固定 ， 所 以 只 需要 设置 一 个 背景 图 片 就 行 了 。 
下 面 再 来 看 一 下 页 面 主体 部 分 左 侧 模块 的 样式 代码 : 
#body_ left { 
padding:20px; 
width:471px; 
float:left; 
} 


设置 宽度 为 471 像素 、 填 充值 为 20 像素 ， 并 且 向 左 侧 浮动 。 
然后 来 看 一 下 页 面 主体 部 分 右 侧 模块 的 样式 代码 : 
#body right { 
padding:20px; 
width:349px; 
float:right; 
} 


同样 设置 了 宽度 、 填 充值 和 浮动 属性 ， 不 过 这 里 是 向 右 浮动 的 ， 也 就 是 说 整体 向 右 靠 ,使 
右 侧 与 页 面 右边 对 齐 。 
最 后 来 看 一 下 页 面 脚注 部 分 的 代码 : 


>> 
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#footer { 
height:10lpx; 
border-top:dashed lpx #bbb; 
} 


这 里 只 设置 了 区 域 高 度 为 101 像素 ， 并 且 上 边框 为 一 条 1 像素 宽 的 灰色 虚线 。 
设置 完 以 后 ， 页 面 效果 如 图 19-12 所 示 。 


| wx 
= 过 ”页 面 人 安全 个” 工具 仙 ， 因 - 


图 19-12 成 型 的 页 面 主 体 框架 


19.4” 头 部 banner 和 菜单 条 的 布局 设计 


我 们 已 经 把 主体 框架 搭 起 来 了 ， 然 后 再 对 每 个 模块 添加 内 容 就 相对 容易 多 了 。 

经 过 19.3 节 的 分 析 研究 ， 顶 部 就 差 一 个 Logo 和 菜单 条 了 ， 因 为 顶部 背景 图 片 已 经 给 出 了 
菜单 条 的 位 置 ， 所 以 这 里 需要 定义 两 个 容器 来 分 割 页 面 头 部 的 空间 。 

第 一 个 banner 的 空间 占据 顶部 除 菜单 条 以 外 的 内 容 ， 包 括 Logo; 第 二 个 放置 一 个 列表 元 
素 ， 列 出 页 面 项 部 的 菜单 条 ， 所 以 顶部 内 容 在 页 面 中 的 HTML 代码 如 下 : 


<div id="header"> 


<div id="banner"> 

<hl class="Logo">Itzcn 书店 </h1> 
</div> 
== 


<div id= 
<ul> 

<1i class="active menu"><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 关 于 书店 </a></1i> 
<1i><a href="#"> 新 书 列表 </a></1i> 
<1i><a href="#"> 图 书 专辑 </a></1i> 
<1i><a href="#"> 我 的 账号 </a></1i> 
<1i><a href="#"> 用 户 注册 </a></1i> 
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<1i><a href="#"> 联 系 我 们 </a></1i> 
<1i><a href="#"> 人 才 招 聘 </a></1i> 
</ul> 


</div> 


上 面 代码 在 header 元 素 中 定义 了 一 个 banner 子 容器 和 一 个 menubar 子 容器 。 在 banner 中 ， 
添加 了 一 个 一 级 标题 ， 作 为 显示 的 Logo; 在 menubar 中 添加 了 一 个 列表 元 素 ， 每 一 个 列表 项 
中 添加 一 个 超 链接 。 

下 面 我 们 来 看 它们 的 样式 声明 。 

首先 是 banner 的 样式 ， 代 码 如 下 : 


#banner { 
height:152px; 

| 

#banner -Logo { 
color:#604329; 
height:82px; 
display:block; 
padding:55px 0 0 95px; 
margin:0; 
font-size:30px; 
font-weight:800; 
font-family: "黑体 "，"Arial Black"; 

} 


这 里 首先 设置 了 banner 元 素 的 高 度 为 152 像素 (当然 剩 下 的 就 是 菜单 条 的 高 度 了 ); 然后 设 
置 了 作为 Logo 的 页 面 元 素 hl 的 样式 , 其 中 有 了 颜色、 高度、 显示 模式 、 填充、 边 距 、 字体 大 小 、 
字体 重量 、 字 体 等 。 

下 面 是 菜单 条 menubar 的 样式 ， 代 码 如 下 : 


#menubar { 
height:24px; 
padding:5px 0 0; 

} 

#menubar ul { 
margin:0 0 0 30px; 

¥ 

#menubar 1i { 
display:inline; 
padding:0 1l0px; 

} 

#menubar liaf{ 
font-size:14px; 
text-decoration:none; 
color:#fff; 

} 


-active menu a { 
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color:#DDA83A !important; 

| 

上 面 代码 首先 设置 菜单 条 的 高 度 和 左 填充 ; 然后 设置 菜单 列表 的 右边 距 ; 再 设置 菜单 项 的 
显示 方式 为 inline( 在 一 行 中 显示 )， 并 设置 该 项 的 左右 填充 值 为 10 像素 ; 接着 设置 菜单 项 里 的 
超 链接 的 字体 、 文 本 装饰 、 字 体 颜 色 等 样式 ， 最 后 添加 一 个 活动 菜单 项 的 样式 ， 修 改 一 下 菜单 
链接 文本 的 颜色 。 不 过 这 里 要 注意 CSS 选择 器 “.active_ menu a” 没 有 选择 器 “#menubar lia” 
的 优先 级 高 ， 所 以 需要 设置 一 个 “!important” 关 键 字 来 增加 该 样式 的 优先 级 。 

下 面 运行 看 看 效果 ， 如 图 19-13 所 示 。 


x 
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19-13 ”页面 项 部 设计 的 效果 


19.5 ”底部 页 面 脚注 的 布局 设计 


页 面 底部 的 内 容 非常 简单 ， 可 以 简单 地 分 为 三 块 ， 第 一 块 是 两 个 图 片 ， 第 二 块 是 一 个 导航 
链接 ， 第 三 块 是 一 张 图 片 。 所 以 可 以 这 样 设计 页 面 底部 的 页 面 代码 : 


<div id="footer"> 
<div class="Logo"> <img src="imgs/Logo.png" /> <img src="imgs/itzcn.gif" /> 
</div> 
<div class="nav"> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 服 务 </a></1i> 
<1i><a href="#"> 保 密 协 议 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 
<img src="imgs/footer bg.gif" /> 
</div> 


< 人 @—— 
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页 面 结构 就 不 用 解释 了 ， 直 接 来 分 析 下 面 的 样式 代码 : 


#footer .Logo { 
height:70px; 
width:100px; 
padding:10px; 
float:left; 

} 

#footer .nav { 
float:right; 
padding:10px; 

} 

#footer .nav li { 
display:inline; 
margin-right:10px; 

} 

#footer .nav li a { 
color:#aaa; 
font-size:13px; 
text-decoration:none; 


} 
这 里 首先 设置 Logo 区 的 大 小 、 填 充 和 浮动 属性 ;然后 设置 导航 的 浮动 属性 和 填充 属性 ; 
再 设置 导航 项 目的 显示 属性 和 右边 距 属性 ;最 后 还 要 定义 页 面 导 航 链接 的 颜色 、 字 号 、 文 本 修 
饰 等 属性 。 
设置 完成 以 后 查看 运行 效果 ， 如 图 19-14 所 示 。 


图 19-14 页面 脚 注 设 计 的 效果 


19.6 左 侧 主 内 容 区 域 的 详细 设计 


窗口 左 侧 主 要 显示 两 个 页 面 栏目 : “好 书 推荐 ”和 “新 书 上 架 ”。 这 两 个 栏目 的 结构 互 不 
影响 ， 所 以 我 们 可 以 分 开设 计 。 


>> 
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19.6.1 “好 书 推荐 ”栏目 样式 设计 


该 栏目 包括 一 个 标题 和 两 个 图 书信 息 。 
标题 是 由 一 个 图 标 和 一 个 标题 文本 组 成 的 ， 而 且 从 效果 图 中 可 以 看 出 ， 页 面 中 7 个 栏目 的 


标题 样式 完全 相同 ， 所 以 可 以 统一 为 它们 共同 设置 一 个 样式 (以 后 如 果 没有 必要 的 话 就 不 再 对 
它们 进行 讲解 )。 


是 - 


首先 选择 使 用 h2 元 素 显 示 这 个 标题 ， 比 如 当前 栏目 中 的 标题 代码 : 
<h2><img src="imgs/bullet1.gif"” /> 好 书 推荐 </h2> 
可 以 为 h2 这 个 元 素 定义 一 个 CSS 样式 ， 代 码 如 下 : 


h2 { 
color:#734633; 
font-family: "黑体 "，"Arial Black"; 
font-size:21px; 
font-weight:700; 
margin:1l5px 07 
} 
h2 img { 
margin-right:Spx; 


} 

这 样 先 设置 栏目 标题 的 颜色 、 字 体 、 字 号 等 属性 ， 然 后 再 设置 标题 内 右边 距 为 5 像素 。 
两 个 推荐 图 书 的 项 目 样式 完全 一 样 ， 所 以 可 以 为 它们 设置 同样 的 页 面 结构 。 

首先 每 个 推荐 图 书 的 项 目 分 为 左 、 右 两 块 ， 可 以 设置 横 排 的 两 个 元 素 。 其 中 左 侧 的 模块 只 


-个 图 像 文 件 ， 右 侧 的 模块 是 一 个 灰 线 边框 的 圆 角 矩形 括 起 的 内 容 ， 所 以 可 以 将 圆 角 和 矩形 的 


上 边 和 下 边 作 为 单独 的 元 素 显示 ， 中 间 设 置 同样 宽度 的 背景 图 片 即 可 。 同 样 ， 中 间 的 内 容 也 可 
以 分 为 三 部 分 : 图 书 名 称 、 说 明和 详细 说 明 链 接 ， 所 以 可 以 再 分 为 上 、 中 、 下 三 个 元 素 。 整 体 


结构 如 图 19-15 所 示 。 


一 
[Book name 
pic Book detail 
[ link 
[ 


19-15 “好 书 推荐 ”栏目 的 样式 设计 
所 以 ， 整 个 “好 书 推荐 ”栏目 的 HIML 代码 如 下 : 


< 人 mm 
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<h2><img src="imgs/bullet1.gif" /> 好 书 推荐 </h2> 
<div class="prod clear"> 
pics/G8100758.jpg" class: 
<div class="explain box"> 


<img src: 


<div class="top"></div> 
<div class="content"> 
<div class="title"><a href="#"> 电 影 风 暴 : Maya 游戏 场景 大 曝光 </a></div> 
<div class="details"> 本 书 介 绍 利 用 Maya 软件 开发 网 络 游戏 的 实现 技术 。 内 容 包 括 Maya 
的 基础 知识 ， 建 模 技术 ， 材 质 、 灯 光 的 应 用 ;游戏 场景 、 游 戏 角 色 、 游 戏 特效 设计 。</div> 
<div class="more"><a href="#">- 详细 说 明 -</a></div> 
</div> 
<div class="bottom"></div> 
</div> 
</div> 
<div class="prod clear"> 
<img src="pics/G7024623.jpg" class="pic" /> 
<div class="explain box"> 
<div class="top"></div> 
<div class= 


content"> 
<div class="title"><a href="#">SQL Server 2008 完全 学 习 手 册 </a></div> 
<div class="details"> 本 书 从 数据 库 的 基础 知识 入 手 ， 全 面 介绍 SQL server 2008 数据 
库 应 用 知识 。 全 书 内 容 包括 数据 查询 和 管理 ， 存 储 过 程 ， 触 发 器 ， 安 全 机 制 ， 集 成 服务 ， 分 析 服 务 和 报 
表 服 务 等 内 容 。</div> 
<div class="more"><a href= 
</div> 
<div class="bottom"></div> 
</div> 
</div> 


这 段 HTML 代码 的 样式 声明 代码 如 下 : 


.prod { 
padding:10px; 
margin-bottom:15px; 
border-bottom:dashed lpx #bbb; 


">- 详细 说 明 -</a></div> 


} 

>prodl -plot 
float:left; 
width:98px; 
height:150px; 


.prod .explain box { 
width:295px; 
float:right; 
margin-right:25px; 

} 


-prod .explain box -top { 
height:9px; 
background-image:url(../imgs/box top.gif); 
} 


-prod .explain box .content { 
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height:100px; 
padding:10px; 
background-image:url(../imgs/box center.gif); 

让 

.prod .explain box -bottom { 
height:9px; 
background-image:url(../imgs/box bottom.gif); 

} 

-prod .explain box .content a { 
color:#F9981D; 
text-decoration:none; 

} 

-prod .explain box .content .title { 
font-size:15px; 
height:20px; 

} 

-Prod .explain box .content .details { 
height:65px; 
line-height:18px; 

} 

.Prod .explain box .content .more { 
text-align:right; 
height:15px; 

} 


上 面 样式 表 中 ， 首 先 设置 模块 的 内 填充 属性 、 底 部 边 距 属性 和 底部 边框 属性 ， 然 后 设置 左 
侧 图 片 的 宽 、 高 和 浮动 属性 ;再 设置 右 侧 说 明 的 右边 距 、 高 度 和 浮动 属性 。 对 于 右 侧 模块 的 顶 
部 设置 元 素 的 高 度 和 背景 图 片 实现 圆 角 边框 的 上 边框 样式 ， 中 间 的 元 素 设 置 其 高 度 、 填 充 和 背 
景 属性 ; 底部 的 元 素 设置 其 高 度 和 背景 实现 贺 角 边框 的 下 边框 样式 。 然 后 设置 说 明 框 中 的 链接 
颜色 和 文本 修饰 ， 再 设置 说 明 内 容 的 标题 ( 即 图 书 名 称 ) 元 素 的 字体 和 高 度 ， 接 着 设置 说 明 内 容 
信息 的 高 度 和 行 高 样式 。 最 后 设置 “查看 更 多 ”链接 所 在 元 素 的 文本 对 齐 方式 和 元 素 高 度 属性 。 


19-16 “好 书 推荐 ”栏目 的 运行 效果 
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19.6.2 “新 书 上 架 ” 栏 目 样 式 设计 


“新 书 上 架 ” 栏 目 模块 比较 简单 ， 没 有 太 复 杂 的 页 面 结构 ， 只 需要 设置 一 个 父 容器 ， 父 容 
器 中 放置 三 个 横 排 的 项 目 即 可 。 横 排 的 项 目 每 个 都 可 以 分 为 上 、 下 两 部 分 ， 上 面 是 书 的 名 称 ， 
下 面 是 图 片 ， 不 过 这 里 的 图 片 需要 在 右上 角 添加 一 个 标识 。 所 以 ， 页 面 结构 可 以 设计 成 如 图 
19-17 所 示 的 样式 。 


title | | title | title 


图 19-17 “新 书 上 架 ” 栏 目的 样式 设计 
因此 ， 该 模块 的 页 面 结构 可 以 设计 成 如 下 代码 所 示 : 


<h2><img src="imgs/bullet2.gif" /> 新 书 上 架 </h2> 
<div class="clear"> 
<div class="show prod"> 
<a href="#">NetBeans</a> 
<div class="pic"> 
<img src="imgs/new icon.gif" class="icon" /> 
<a href="#"><img src="pics/N07023858.jpg" class="prod pic" /></a> 
</div> 
</div> 
<div class="show prod"> 
<a href="#">Ruby on Rail</a> 
<div class="pic"> 
<img src="imgs/new_ icon.gif" class="icon" /> 
<a href="#"><img src="pics/N207022820.jpg" class="prod pic" /></a> 
</div> 
</div> 
<div class="show prod"> 
<a href="#">SSH</a> 
<div class="pic"> 
<img src="imgs/new icon.gif" class="icon" /> 
<a href="#"><img src="pics/N207024411.jpg" class="prod pic" /></a> 
</div> 
</div> 
</div> 


这 段 代码 的 样式 声明 代码 如 下 所 示 : 


sm >> 
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-Show_ prod { 
text-align:center; 
width:132px; 
margin:10px; 
float:left; 
} 
-Show_ prod a { 
color:#aaa; 
font-size:13px; 
text-decoration:none; 
line-height:21px; 
} 
-Show prod .pic { 
background-image:url(../imgs/new prod box.gif); 
height:119px; 
position:relative; 
} 
-Show prod .pic .icon { 
position:absolute; 
top:07 
right:0; 
} 
.Show prod .pic .prod pic { 
margin:15px; 
width:60px; 
height:90px; 
} 
上 面 的 样式 表 中 声明 了 “新 书 上 架 ” 栏 目 中 项 目的 宽度 、 文 本 对 齐 方式 、 边 距 、 浮 动 等 属 
性 ;然后 设置 项 目 中 超 链 接 的 文本 颜色 、 字 号 、 文 本 修饰 、 行 高 等 属性 。 再 设置 了 项 目 中 的 图 
片区 域 的 背景 、 高 度 、 定 位 方式 等 属性 (这 里 设置 其 相对 定位 其 实 对 其 位 置 并 不 产生 任何 影响 ， 
但 是 其 子 元 素 中 需要 以 该 对 象 为 基准 进行 绝对 定位 ， 所 以 设置 它 的 文本 样式 )。 接 着 还 设置 了 
右上 角 新 书 图 标定 位 方式 及 显示 位 置 。 最 后 设置 图 书 图 片 的 边 距 、 宽 度 、 高 度 等 属性 。 
实现 了 上 面 样式 的 设置 以 后 ， 在 浏览 器 中 运行 的 页 面 效 果 如 图 19-18 所 示 。 
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19-18 “新 书 上 架 ” 栏 目的 运行 效果 
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19.7 右 侧 辅助 内 容 区 域 的 详细 设计 


页 面 右 侧 辅助 内 容 区 域 主要 分 为 5 个 独立 的 栏目 : “购物 车 ”、“ 关 于 书店 ”、“ 优 惠 图 
“图 书 分 类 ”和 “友情 链接 ”。 另 外 还 有 两 个 花 式 图 案 的 栏目 分 隔 条 。 下 面 分 别 对 这 些 


模块 进行 设计 。 


19. 


7.1 “购物 车 ”栏目 样式 设计 


“购物 车 ”栏目 非常 简单 ， 只 有 一 个 标题 和 一 行 购物 车 的 简单 信息 。 所 以 布局 可 以 设计 成 


如 图 19-19 所 示 的 结构 。 


tle cart 


图 19-19 “购物 车 ”栏目 的 设计 布局 

我 们 为 该 栏目 设计 的 页 面 代码 如 下 所 示 : 
<div id="cart" class="clear"> 

<h2><img src="imgs/cart.gif" width="21" height="18" /> 购物 车 </h2> 

<div class="info">2 件 商 品 | <span> 总 计 : 123X¥</span><a href="#"> 查 看 购物 车 
</a></div> 
</div> 
<img src="imgs/border.gif" width="329" height="31" /> 


这 里 定义 了 一 个 购物 车 栏目 的 容器 ， 其 包含 标题 和 购物 车 信息 容器 两 个 子 元 素 。 然 后 最 下 


面 的 图 片 设置 栏目 下 侧 的 分 隔 条 。 


上 面 HTML 代码 的 CSS 样式 代码 如 下 : 


#cart h2 { 
float:left; 

} 

#cart .info { 
float:left; 
margin:20px 0 0 20px; 

} 

#cart .info span { 
color:#900; 

' 

#cart .info a { 
color:#900; 
margin-left:10px; 
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这 里 首先 要 设置 栏目 标题 样式 为 左 浮动 ; 然后 设置 信息 模块 样式 也 向 左 浮动 ， 并 且 设置 了 
上 边 和 下 边 的 边 距 ， 再 设置 信息 模块 span 标记 的 文本 颜色 为 暗 红色 ， 最 后 设置 信息 模块 中 的 
超 链接 为 暗 红 色 ， 左 边 距 为 10 像素 。 

设置 完 以 后 在 浏览 器 中 的 运行 效果 如 图 19-20 所 示 。 
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图 19-20 “购物 车 ”栏目 的 设计 效果 


19.7.2 “关于 书店 ”栏目 样式 设计 


“关于 书店 ”栏目 的 结构 也 非常 简单 ， 只 需要 一 个 容器 ， 然 后 在 容器 中 设置 一 个 标题 、 
段 文本 和 一 张 图 片 即 可 。 所 以 页 面 结构 可 以 设计 成 如 图 19-21 所 示 的 效果 。 


title 


19-21 “关于 书店 ”栏目 的 设计 布局 
我 们 为 该 栏目 的 页 面 编写 的 代码 如 下 所 示 : 
<div id="about our"> 
<h2><img src="imgs/bullet3.gif" width="26" height="25" /> 关于 书店 </h2> 
<div class="details clear"> 
<img src="pics/about.jpg" /> 
<p> ” 汇 智 科技 公司 关注 IT 教育 培训 市 场 的 发 展 和 变化 , 致力 于 在 线 教育 , 推进 无 纸 化 教学 进程 。 
窗 内 网 (www. itzcn -com) 结合 软件 开发 的 实际 需求 ， 发 布 了 Flex、C#、Java、ASP.NET 和 JSP 等 
系列 视频 教程 。</p> 
</div> 
</div> 
<img src="imgs/border.gif" width="329" height="31" /> 


E501 
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因为 结构 比较 简单 ， 也 就 不 需要 多 解释 了 。 最 后 一 个 img 元 素 是 栏目 间 的 分 隔 线 图 片 。 
下 面 是 为 这 段 HTML 代码 添加 的 CSS 样式 代码 : 


#about our .details { 
font-size:13px; 
line-height:18px; 
color:#333; 

} 

#about our .details img { 
width:116px; 
height:80px; 
float:right; 
margin:10px; 


} 

代码 看 起 来 更 加 简单 。 标 题 样式 不 用 设置 ， 这 里 只 设置 文本 字体 、 颜 色 、 行 高 ， 图 片 的 高 
度 、 宽 度 、 右 浮动 、 边 距 等 属性 。 

在 浏览 器 中 页 面 的 运行 效果 如 图 19-22 所 示 。 
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场景、 游戏 角色 、 游 戏 畦 效 设计 。 汇 智 科技 公司 关注 IT 教 育 培训 市 
场 的 发 展 和 变化 ， 致 力 千 在 线 教育 , 


推进 无 纸 化 教学 进程 。 罕 内 网 
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19-22 “关于 书店 ”栏目 的 运行 效果 


19.7.3 “优惠 图 书 ”栏目 样式 设计 


“优惠 图 书 ” 栏 目 只 需要 在 栏目 容器 中 添加 一 个 标题 和 三 个 竖 排 的 项 目 即 可 。 每 个 项 目 中 
需要 一 个 标题 ( 书 名 )、 一 张 图 片 和 图 片 右上 角 的 优惠 标识 。 所 以 ， 该 栏目 的 页 面 可 以 设计 成 如 
图 19-23 所 示 的 结构 。 
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title 


title 


title 


title 


图 19-23 “优惠 图 书 ” 栏 目的 样式 设计 
我 们 为 该 页 面 模块 设计 的 结构 代码 如 下 所 示 : 


<div id="promotions"> 
<h2><img src="imgs/bullet4.gif" width="26"” height="25" /> 优惠 图 书 </h2> 
<div class="show prod"> <a href="#">3ds Max 2009</a> 
<div class="pic"> 
<img src="imgs/promo icon.gif" class="icon" /> 
"><img src="pics/Ss528092300.jpg" class="prod pic" /></a> 


<div class="show prod"> <a href="#">3ds max 9</a> 
<div class="pic"> 
<img src="imgs/promo icon.gif" class="icon" /> 
<a href="#"><img src="pics/S528093229.jpg" class="prod pic" /></a> 
</div> 
</div> 
<div class="show prod"> <a href="#">Premiere Pro 2.0</a> 
<div class="pic"> 
<img src="imgs/promo icon.gif" class="icon" /> 
<a href="#"><img src="pics/S528093724.jpg" class="prod pic" /></a> 
</div> 
</div> 
</div> 


从 上 面 的 代码 中 不 难 发 现 ， 这 里 每 一 个 项 目 都 使 用 了 在 “新 书 上 架 ” 栏 目 中 定义 的 项 目 样 


<@——— 


式 。 因 为 它们 显示 的 效果 是 完全 相同 的 ， 这 样 就 可 以 减少 一 些 代码 。 这 里 我 们 只 需要 定义 该 栏 
目 模块 的 样式 即 可 。 
下 面 是 为 该 模块 定义 的 CSS 样式 代码 : 
#promotions { 
width:152px; 
float:left; 
} 


这 里 只 定义 了 该 模块 的 宽度 和 左 浮动 属性 。 
在 浏览 器 中 运行 以 后 ， 效 果 如 图 19-24 所 示 。 


EE 


19-24 “优惠 图 书 ” 栏 目的 运行 效果 


19.7.4 “图 书 分 类 ”栏目 样式 设计 


从 页 面 效 果 图 中 不 难 发 现 : “图 书 分 类 ”栏目 只 有 一 个 标题 和 一 个 列表 。 所 以 ， 该 栏目 可 
以 设计 成 如 图 19-25 所 示 的 布局 效果 。 


title 


19-25 “图 书 分 类 ”栏目 的 样式 设计 
我 们 为 该 页 面 模块 设计 的 结构 代码 如 下 所 示 : 


要 第 19 章 itzcn 书店 设计 半 
<div class="right box"> 


<h2><img src="imgs/bullet5.gif" width="26" height="25"” /> 图 书 分 类 </h2> 

< class="1ist"> 
<1Li><a href="#"> 三 维 动画 </a></1i> 
<1i><a href="#">.NET 技术 </a></1i> 
<li><a href="#">Java 技术 </a></1i> 
<li><a href="#">PHP 技术 </a></1i> 
<1i><a href="#"> 其 它 语言 </a></1i> 
<1i><a href="#">Web 前 端 </a></1i> 
<1i><a href="#"> 数 据 库 技 术 </a></1i> 
<1i><a href="#"> 基 础 应 用 </a></1i> 

</ul> 

</div> 


上 面 这 段 代码 非常 简单 ， 不 作 详细 的 解释 了 ， 下 面 是 为 这 段 代 码 编写 的 CSS 样式 代码 : 


-right box { 
width:177px; 
float:right; 

} 

ul.list { 
padding:10px 0 0 50px; 

} 

ml Lit Tt 
list-style:url(../imgs/left menu bullet.gif); 
padding:3px 0; 

} 

lslist 1 a t 
text-decoration:none; 
color:#000000; 

} 

ul.list li a:hover { 
text-decoration:underline; 


} 


在 这 段 CSS 样式 代码 中 设置 了 该 模块 的 宽度 和 右 浮动 属性 、 列 表 的 填充 属性 、 列 表 项 的 
项 目 符号 和 填充 属性 、 项 目 中 超 链接 的 文本 颜色 和 文本 修饰 属性 ， 以 及 列表 中 超 链接 的 :hover 
伪 类 的 文本 修饰 属性 。 

设置 完成 以 后 ， 在 浏览 器 中 运行 该 页 面 ， 效 果 如 图 19-26 所 示 。 
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19-26 “图 书 分 类 ”栏目 的 运行 效果 
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19.7.5 “友情 链接 ”栏目 样式 设计 


“友情 链接 ”栏目 的 页 面 布局 和 CSS 样式 基本 上 与 “图 书 分 类 ”栏目 完全 相同 ， 所 以 我 
们 可 以 使 用 与 “图 书 分 类 ”栏目 完全 相同 的 页 面 布局 和 栏目 样式 。 这 里 我 们 只 需要 编写 页 面 代 
码 即 可 。 

为 该 栏目 编写 的 页 面 代码 如 下 所 示 : 


<div class="right box"> 
<h2><img src="imgs/bullet6.gif" width="26" height="25" /> 友情 链接 </h2> 
<ul class="list"> 
<1i><a href="#"> 窗 内 网 </a></1i> 
<1i><a href="#"> 窗 内 论坛 </a></1i> 
<1i><a href="#">Google 搜索 </a></1i> 
<1i><a href="#"> 百 度 搜 索 </a></1i> 
</ul> 
</div> 


这 里 我 们 不 用 再 为 其 添加 样式 。 所 以 可 以 直接 在 浏览 器 中 运行 ， 效 果 如 图 19-27 所 示 。 


了 


图 19-27 “友情 链接 ”栏目 的 运行 效果 
19.8 总 结 


在 这 个 实例 中 ， 我 们 对 前 面 学 过 的 所 有 知识 点 进行 了 总 结 。 比 如 设置 文本 的 颜色 、 修 饰 、 
样式 、 字 体 ， 页 面 元 素 的 背景 、 宽 度 、 高 度 、 边 距 、 填 充 、 边 框 ， 页 面 元 素 的 定位 、 布 局 ， 页 
面 元 素 的 显示 模式 , 等 等 。 通过 这 个 实例 , 我 们 对 这 些 知 识 点 进行 了 综合 的 运用 , 强化 了 理解 ， 
加 深 了 记忆 。 
通过 在 这 个 项 目 中 的 实际 操作 , 我 们 对 整个 页 面 布局 和 页 面 样式 的 设计 有 了 更 深层 次 的 体 
会 。 不 过 这 是 一 个 非常 简单 的 页 面 ， 所 以 设计 起 来 没有 太 大 的 困难 。 对 一 门 技术 的 掌握 关键 在 
于 勤学 多 练 ， 我 们 只 有 多 做 项 目 ， 不 断 地 从 实践 中 吸取 经 验 ， 才 能 获得 更 大 的 收获 。 
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内 容 摘要 : 

微 博 是 一 个 基于 用 户 关系 的 信息 分 享 、 信 息 传 播 以 及 信息 获取 的 平台 , 用户 可 以 通过 Web、 
Wap 以 及 各 种 客户 端 组 建 个 人 社区 ， 以 140 字 左 右 的 文字 更 新 信息 ， 并 实现 即时 分 享 。 

微 博 系统 的 出 现 ， 解 决 了 BBS 系统 无 法 解决 的 “ 劣 币 驱逐 良 币 ” 的 问题 ， 也 解决 了 Blog 
系统 中 话题 无 法 有 效 传播 的 问题 ， 还 解决 了 SNS(Social Networking Services， 社 会 性 网 络 服务 ) 
系统 虚假 好 友 泛 滥 的 社交 问题 ， 是 目前 最 火爆 的 互动 社区 系统 。 

本 章 针对 一 个 微 博 首页 的 结构 进行 分 析 , 并 通过 div + CSS 的 Web 标准 方式 对 其 进行 实现 。 
在 讲解 的 过 程 中 涉及 了 很 多 CSS 设计 技巧 和 兼容 性 解决 方案 。 

学 习 目 标 : 

@ 了 解 什么 是 微 博 
了 解 微 博 的 重要 组 成 部 分 
熟悉 Dreamweaver 中 站 点 的 定义 
掌握 通过 CSS 定义 Logo 的 方式 
掌握 CSS 中 列表 样式 的 定义 
掌握 如 何 通过 CSS 将 链接 显示 为 图 片 
掌握 浮动 元 素 的 清理 方法 
掌握 微 博 各 模块 的 实现 方法 
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20.1 系统 分 析 


我 们 无 论 做 什么 事情 ， 事 先 都 需要 做 好 充分 的 准备 工作 ， 要 想 设 计 出 一 个 令 自己 和 网 友 都 
满意 的 网 站 同样 如 此 。 在 开始 实际 设计 工作 之 前 ， 我 们 首先 要 确定 这 样 几 个 问题 ， 然 后 才能 开 
始 实质 性 的 工作 : 微 博 的 含义 是 什么 ， 都 由 哪些 部 分 组 成 ， 需 要 呈现 的 又 是 什么 ， 如 何 为 这 些 
内 容 合理 地 安排 页 面 表现 方式 。 


20.1.1 最 终 效果 预览 


微 博 是 一 种 互动 及 传播 性 极 快 的 交流 工具 ， 其 传播 速度 甚至 比 传统 媒体 和 网 络 媒体 还 
要 快 。 

微 博 所 谓 “ 微 型 博客 (Micro Bloging)” 是 一 种 非 正式 的 迷你 型 博客 。 它 是 一 种 基于 Web 2.0 
技术 的 新 兴 的 交流 平台 ， 是 一 种 可 以 即时 发 布 消息 的 类 似 博 客 的 系统 。 它 最 大 的 特点 就 是 集成 
化 和 开放 化 ， 你 可 以 通过 手机 、IM 软件 (gtalk、MSN、QQ、skype) 和 外 部 API 接口 等 途径 向 自 
己 的 微 博客 发 布 消息 。 微 博客 的 另 一 个 特点 还 在 于 这 个 “ 微 ” 字 ， 一 般 发 布 的 消息 只 能 是 只 言 
片 语 ， 像 Twitter 这 样 的 微 博客 平台 ， 每 次 只 能 发 送 140 个 字符 。 

相对 于 强调 版 面 布 置 的 博客 来 说 ， 微 博 的 内 容 只 是 由 简单 的 只 言 片 语 组 成 。 从 这 个 角度 来 
说 ， 对 用 户 的 技术 要 求 门槛 很 低 ， 而 且 在 语言 的 编排 组 织 上 ， 没 有 博客 那么 高 ， 只 需要 反映 自 
己 的 心情 ， 不 需要 长 篇 大 论 ， 更 新 起 来 也 方便 ， 和 博客 比 起 来 ， 字 数 也 有 限制 ， 微 博 开 通 的 多 
种 API 使 得 大 量 的 用 户 可 以 通过 手机 、 网 络 等 方式 即时 更 新 自己 的 个 人 信息 。 

在 了 解 了 有 关 微 博 的 介绍 之 后 ， 下 面 我 们 就 来 看 看 本 实例 中 的 最 终 运行 效果 ， 如 图 20-1 
所 示 。 


20-1 最 终 微 博 首页 效果 
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20.1.2 ”结构 分 析 


在 本 节 中 ， 我 们 将 会 对 图 20-1 所 示 效 果 进 行 拆 分 ， 然 后 分 析 它 的 具体 组 成 结构 。 

首先 抛 开具 体 的 网 页 内 容 ， 单 从 结构 上 看 其 实 就 是 由 我 们 所 熟悉 的 上 、 中 、 下 三 部 分 结 
构 组 成 。 在 本 实例 中 从 上 至 下 依次 命名 为 login top、login body 和 footer 三 部 分 ， 总 体 结构 如 
图 20-2 所 示 。 


login top 


login_body 


footer 


20-2 ”页 面 总 体 结构 


login_top 块 位 于 页 面 的 最 项 部 ， 用 于 显示 站 点 的 Logo， 其 结构 如 图 20-3 所 示 。 
Login-body 块 是 页 面 的 主要 内 容 显 示 区 域 ， 在 这 里 又 分 为 左边 展示 区 域 和 右边 展示 区 域 ， 


如 图 20-4 所 示 。 


图 20-3 ”顶部 结构 图 20-4 中 部 结构 


左边 的 login 1 块 用 于 显示 网 站 宣传 标语 、 热 议 话题 以 及 最 新 话题 ， 右 边 的 login r 块 中 则 
是 微 博 注册 按钮 、 登 录 表单 以 及 最 受 关注 的 用 户 。 细 分 这 些 内 容 后 的 结构 如 图 20-5 所 示 。 


tit | 
login_item 
talking | 
talking_list 
login_info 


20-5” 细 分 后 的 中 部 结构 


<@——— 
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关于 页 面 底部 的 footer 块 ， 则 比较 简单 ， 仅 包含 了 一 些 文字 连接 ， 显 示 辅助 信息 和 备案 信 
息 。 所 以 这 里 就 不 再 给 出 结构 。 


20.2 准备 工作 


经 过 前 面 对 系统 结构 的 分 析 ， 明 确 了 系统 的 模块 划分 。 现 在 将 开始 着 手 准备 网 站 的 设计 工 
作 ， 这 里 我 们 使 用 的 开发 工具 为 Dreamweaver CS4， 开 发 浏览 器 为 下 8。 最 终 效果 同时 还 在 
Firefox 3、Chrome 和 Safari 等 浏览 器 上 进行 了 测试 ， 未 出 现任 何不 兼容 的 问题 。 


20.2.1 创建 站 点 结构 


Dreamweaver CS4 最 强大 的 功能 就 是 站 点 管理 ， 许 多 功能 必须 在 创建 站 点 后 才能 实现 。 因 
此 ， 通 常 在 Dreamweaver CS4 中 制作 网 站 时 ， 首 先 需要 定义 一 个 本 地 站 点 。 

定义 本 地 站 点 ， 就 是 在 自己 计算 机 的 硬盘 上 建立 一 个 目录 ， 然 后 将 所 有 与 制作 网 页 相关 的 
文件 都 存放 在 里 面 ， 以 便 进行 网 页 的 制作 和 管理 。 因 此 ， 站 点 就 可 以 理解 成 同属 于 一 个 Web 
主题 的 所 有 文件 的 存储 地 点 。 

创建 本 地 站 点 首先 应 在 本 地 计算 机 的 磁盘 中 建立 相应 的 物理 目录 ( 即 指定 文件 夹 )。 例 如 ， 
在 本 地 计算 机 的 “本 地 磁盘 (D:)” 盘 中 ， 创 建 t 文 件 夹 ， 然 后 即 可 用 t 作为 本 地 站 点 的 根 文件 
来 

(1) 在 Dreamweaver CS4 中 执行 “站 点 ”| “新 建站 点 ”命令 ， 弹 出 “未 命名 站 点 1 的 站 
点 定义 为 ”对 话 框 ， 这 个 对 话 框 包括 “基本 ”选项 卡 和 “高 级 ”选项 卡 。“ 基 本 ”选项 卡 相当 
于 一 个 建立 站 点 的 向 导 ， 将 引导 设计 者 一 步 步 地 设置 站 点 ，“ 高 级 ”选项 卡 则 用 来 直接 设置 站 
点 的 各 个 属性 。 

(2) 在 对 话 框 的 “基本 ”选项 卡 中 输入 新 建站 点 的 名 称 “MicroBlog”， 注 意 对 话 框 的 标题 
也 将 随 着 新 站 点 名 称 的 变化 而 变化 为 “MicroBlog 的 站 点 定义 为 ”， 如 图 20-6 所 示 。 


20-6 ”定义 站 点 名 称 
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\ 
| 建议 初学 者 先 使 用 “基本 ”选项 卡 ， 熟 悉 以 后 再 直接 用 “高 级 ”选项 卡 进行 设置 。 


(3) 单 击 “ 下 一 步 ”按钮 ， 弹 出 如 图 20-7 所 示 的 对 话 框 。 在 这 个 对 话 框 中 设置 站 点 的 服务 
器 技术 ， 这 里 是 一 个 单 选 按钮 组 ， 可 设置 站 点 是 否 使 用 PHP 或 者 JSP 等 动态 网 页 技术 。 如 果 
选择 “是 , 我 想 使 用 服务 器 技术 ” 单 选 按钮 ， 则 将 出 现 一 个 选择 具体 服务 器 技术 的 下 拉 列 表 框 ， 
在 下 拉 列 表 框 中 选择 适合 的 选项 即 可 。 

(4) 单 击 “ 下 一 步 ”按钮 ， 弹 出 如 图 20-8 所 示 的 对 话 框 ， 在 对 话 框 上 方 的 单 选 按 钮 组 中 选 
择 编辑 站 点 文件 的 方法 ， 其 中 包括 两 个 选项 ， 在 这 里 使 用 默认 值 。 在 下 方 的 文本 框 中 输入 新 建 
站 点 所 在 的 目录 ， 或 者 单 击 “ 浏 览 ”按钮 回 选 择 。 


Sd Eh 


国光 9 半 各 机 :的 本 地 到 本， 元 所 后 再 上 作 服 名 吕 《 推荐 ) 夺 ] 
的 辣椒 才 月 少 按 下 原 务 关上 过 生 阐 


宏 |5jex 伯 全 在 计划 机 上 的 什 和 位置? 
LM 


WR 
图 20-7 ”选择 使 用 的 服务 器 技术 图 20-8 选择 站 点 的 存储 位 置 


(5) 单 击 “ 下 一 步 ” 按 钮 ， 此 时 可 以 指定 如 何 与 远程 服务 器 进行 共享 ， 在 列表 中 选择 “无 ” 
选项 ， 如 图 20-9 所 示 。 

(6) 单 击 “ 下 一 步 ” 按 钮 ， 弹 出 如 图 20-10 所 示 的 对 话 框 ， 现 在 所 有 的 设置 都 已 完成 ， 这 
里 给 出 了 所 有 设置 的 列表 。 单 击 “ 完 成 ”按钮 ， 即 可 完成 新 建站 点 的 操作 。 


Ih | | | 


图 20-9 设置 共享 文件 图 20-10 完成 新 建站 点 


全 
四 
隐 
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”如 果 本 地 的 计算 机 中 已 安装 IIS 服务器, 用户 可 以 使 用 站 点 的 定义 将 站 点 配置 为 动 
组 示 | 。 态 站 点 ， 配 置 方法 这 里 就 不 再 进行 介绍 。 
0) 完成 站 点 的 创建 ， 执 行 “ 窗 口 ”| “文件 ”是 否 该 用 引号 呢 ? 命令 打开 “文件 ”面板 。 
在 这 个 面板 中 显示 了 当前 站 点 的 目录 结构 ， 而 且 还 可 以 执行 各 种 管理 操作 。 如 图 20-11 所 示 为 
最 终 本 实例 的 站 点 结构 。 


GE a EE 


图 20-11 本 地 站 点 结构 


实例 中 各 个 目录 的 含义 如 下 。 

@ js 目录 : 保存 站 点 中 所 用 到 的 脚本 文件 ， 像 Java Script 代码 等 。 

@ style 目录 : 保存 站 点 中 所 用 到 的 CSS 样式 文件 以 及 样式 所 带 的 图 片 资源 。 在 该 目录 
下 的 images 子 目 录 中 又 包含 了 common、public 和 user 目录 。 


20.2.2 ”定义 页 面 结构 


打开 Dreamweaver CS4， 执 行 “ 文 件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 。 在 左 侧 
列表 中 选择 “空白 页 ”选项 , “页 面 类 型 ”列表 中 选择 HTML 选项 , “布局 ”列表 中 选择 “无 ” 
选项 。 从 右 侧 “文档 类 型 ”下 拉 列 表 框 中 选择 XHTML 1.0 Transitional 选项 ， 再 单 击 “ 创 建 ” 
按钮 ， 如 图 20-12 所 示 。 


图 20-12 “新 建文 档 ” 对 话 框 
在 “设计 ”视图 中 将 标题 修改 为 “记事 狗 微 博 -随时 随地 分 享 身边 的 新 鲜 事 儿 ”。 执 行 “ 文 
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件 ”|“ 保 在” 命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 ， 将 新 文件 以 “index.html” 为 名 称 保 存 到 
站 点 的 根 目录 下 。 

接 下 来 在 站 点 的 style 目录 下 新 建 一 个 CSS 文件 ， 命 名 为 “defaultcss”。 返 回 index.html 
文件 ， 在 head 元 素 中 将 该 CSS 文件 链接 入 页 面 ， 代 码 如 下 所 示 : 


<link href="style/default.css" rel="stylesheet" type="text/css" /> 


然后 ， 在 index.html 中 使 用 div 元 素 并 通过 其 id 属性 来 定义 整个 页 面 的 结构 。 如 下 所 示 为 
最 终 定义 后 的 页 面 布局 结构 : 


<div id="wrap"> 
<div id="1login top"> 此 处 显示 id "login top" 的 内 容 </div> 
<div id="login body"> 此 处 显示 id "login body” 的 内 容 
<div id="login 1"> 此 处 显示 id "login 1" 的 内 容 
<div id="tit"> 此 处 显示 id "tit" 的 内 容 </div> 
<div id="talking"> 此 处 显示 id "talking” 的 内 容 </div> 
<div id="talking 1ist"> 此 处 显示 id "talking 1ist" 的 内 容 </div> 
</div> 
<div id="login_r"> 此 处 显示 id "1ogin_r" 的 内 容 
<div id="login item"> 此 处 显示 id "login item" 的 内 容 </div> 
<div id="login info"> 此 处 显示 id "login info" 的 内 容 </div> 
</div> 
</div> 
<div id="bodybt"> 此 处 显示 id "bodybt" 的 内 容 </div> 
</div> 


由 于 各 浏览 器 对 所 支持 的 HTML 标签 的 默认 样式 存在 不 一 致 性 ， 因 此 ， 要 让 显示 效果 相 
同 ， 首 先 需 要 清除 默认 的 样式 ， 并 使 用 新 样式 进行 蔡 换 。 如 下 给 出 的 是 本 实例 中 需要 替换 的 
CSS 样式 ， 将 其 添加 到 Style.css 中 。 
html { 
color:#000; 


font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 


} 
body, div, label, dl, dt, dd, ul, ol, li, hl, h2, h3, h4, h5, h6, pre, code, 
form, fieldset, legend, p, blockquote, th, td { 
margin:0; 
padding:0; 
border:0; 
outline:0; 
} 
body { 
Color:#333; 
background:url (images/public/bdybg.jpg) top center no-repeat; 
background-color:#9edfe8; 
} 


保存 对 文件 的 上 述 修 改 。 此 时 ， 在 浏览 器 中 预览 运行 效果 ， 如 图 20-13 所 示 。 


<O—— 
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图 20-13 ” 带 页 面 结构 的 运行 效果 


20.3 设计 项 部 Logo 展示 模块 


在 页 面 的 项 部 区 域 中 显示 了 微 博 网 站 的 Logo 图 片 ， 这 个 区 域 位 于 body 的 最 上 方 , 在 显示 
时 将 非常 醒目 。 
这 部 分 在 HTML 页 面 结构 中 对 应 的 是 login_top 模块 ， 而 该 模块 又 被 包含 在 一 个 名 为 wrap 
的 主 容器 内 。wrap 容器 表示 是 整个 页 面 ， 后 面 所 有 的 内 容 也 都 包含 在 该 容器 内 。 
我 们 先 来 为 主 容器 wrap 定义 一 些 样式 ， 像 宽度 和 高 度 等 ， 代 码 如 下 所 示 : 
#wrap { 
width:956px; 
margin:0 auto; 
min-height:500px; 
} 
然后 ， 再 为 顶部 login_top 定义 样式 ， 主 要 是 高 度 和 定位 属性 ， 代 码 如 下 所 示 : 
#login top { 
height:97px; 
position:relative; 
} 
接 下 来 ， 删 除 在 wrap 和 login_top 容器 内 的 多 余 文 本 。 定 义 一 个 微 博 超 链 接 ， 以 及 一 个 用 
于 显示 Logo 的 div 元 素 。 


<div id="login top"> 
<a href="" class="11ink"></a> 
<div class="LogoLink"></div> 
</div> 
在 这 里 超 链接 a 的 class 是 link， 创 建 一 个 “ 雪 ogin top allink”CSS 样式 规则 来 匹配 它 ， 
并 编写 下 面 的 代码 。 
#login top a.llink { 
display:block; 
position:absolute; 
width:215px; 
height:81px; 


su >> 
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z-index:10; 

ODS 

left:34px; 
} 


最 后 是 在 LogoLink 中 显示 一 张 背景 图 片 ， 再 定位 它 的 位 置 ， 以 及 是 否 重复 。 这 部 分 代码 
如 下 所 示 : 


#1login top .LogoLink { 

background:url (images/public/Logol.png) no-repeat center; 

width:215px; 

height:81px; 

position:absolute; 

top:15px; 

left:34px; 

_background:none; 
_filter:progid:DXxImageTransform.Microsoft.AlphaImageLoader (src='images/publ 
ic/Logol.png', sizingMethod='crop'); 

} 


完成 后 ， 在 浏览 器 中 打开 来 测试 应 用 样式 后 的 顶部 运行 效果 ， 如 图 20-14 所 示 。 


图 20-14 应 用 样式 后 的 顶部 运行 效果 


20.4 设计 底部 版 权 展示 模块 


现在 ， 我 们 切换 到 HIML 页 面 的 最 底部 ， 在 这 里 为 显示 版 权 信息 的 展示 区 域 进行 布局 。 
首先 删除 bodybt 容器 内 的 多 余 文 本 ， 再 编写 如 下 的 CSS 样式 定义 该 模块 的 宽度 、 高 度 、 
位 置 和 填充 等 。 


#bodybt { 
background:url (images/public/bdybt .png) no-repeat; 
width:920px; 
height:54px; 
padding:20px 10px 0 26px; 
position:relative; 


在 HTML 页 面 中 为 这 一 模块 添加 内 容 ， 包 含 一 个 带 链 接 的 导航 菜单 、 客 服 电话 、 备 案 信 
息 以 及 信息 举报 图 片 。 最 终 代 码 如 下 所 示 : 


5 | 
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<div id="bodybt"> 
<div class="MIB foot new MIB linkbr"> 
<div class="]lf"> 
<p class="pl"><a href="#"> 帮 助 </a><a href="#"> 意 见 反馈 </a><a 
href="#"> 微 博 认 证 及 合作 </a><a href="#" > 开放 平台 </a><a href="#"> 狗 狗 网 导航 
</a></p> 
<p> 客 服 电话 : 400 560 5588 京 ICP 备 08104500 号 </p> 
</div> 
<div class="clearit"></div> 
<div class="botLogo"><a href="#" ><img 
src="style/images/public/botLogo.png" /></a></div> 
</div> 
</div> 


如 上 述 代 码 所 示 ， 使 用 分 组 选择 符 “MIB_foot new MIB_linkbr” 定 义 了 一 个 div 元 素 。 在 
这 个 元 素 内 ， 又 可 以 分 下 、clearit 和 botLogo 三 个 部 分 。 
如 下 所 示 是 .MIB_foot_new 的 CSS 样式 代码 : 


#bodybt .MIB foot new { 
color:#999; 
width:780px; 

} 

-MIB foot new { 
padding:0 20px 0 0; 

} 

#bodybt .MIB foot new a { 
color:#6eafd57 

} 


页 脚 的 这 段 布局 代码 中 ， 使 用 p 元 素来 进行 分 隔 ， 其 中 class 为 pl 的 p 元素 中 包含 了 网 站 
辅助 链接 ， 再 往 下 的 p 元 素 则 显示 了 一 段 说 明文 字 。 
为 了 在 第 1 个 p 元 素 中 的 链接 之 间 产 生 间隔 ， 这 里 使 用 margin-right 设置 了 右边 间隔 。 第 
2 个 p 元 素 则 设置 了 距 底部 的 填充 距离 。 
-MIB foot new .pl a { 
margin-right:11lpx; 
} 
-MIB foot new P 1{ 
padding-bottom: 5px; 
} 


再 往 下 看 看 botLogo 的 CSS 样式 ， 由 于 它 定 义 的 图 片 需 要 固定 在 页 面 的 右 下 角 。 所 以 ， 这 
里 利用 绝对 定位 ， 再 通过 设置 距 项 部 和 右 侧 的 大 小 来 实现 ， 代 码 如 下 : 


#bodybt -botLogo { 


position:absolute; 
rigqht:15px? 
top:10px; 


四 第 20 章 设计 微 博 首页 汪 


细心 的 读者 可 能 会 注意 到 ， 这 里 还 有 一 个 空 div 元 素 没有 介绍 。 之 所 以 放 在 最 后 介绍 ， 是 
因为 它 的 作用 是 避免 产生 两 边 浮动 元 素 未 闭合 的 情况 ， 具 体 实现 如 下 所 示 : 
-Clear, .clearit { 


clear:both; 
padding:0; 


margin:0; 


} 
类 似 这 样 的 代码 ， 我 们 会 在 后 面 布局 时 经 常用 到 。 如 图 20-15 所 示 为 应 用 样式 后 项 部 和 底 
部 的 运行 效果 。 


记 李 狗 微 博 - 随 时 随地 分 享 身边 的 新 终 事 -Windows Internet Ezplorcr 回回 风 
GO ev 加 四 加 
次 必 天 天 。 | 芒 记事 遇 二 -全 时 儿 地 分 训 身 过 的 和 时 事 几 从 - 国 - 呈 -EO- 220- IAW- OO- 


记事 拘 微 博 


发 更， 也 示人 字 


处 显示 di "ogin_body 的 由 容 
| 此 下 显示 dognr 9 四 写 
I 


和 意 几 所 局 袖 情 证 及 合作 开 避 下 首 狗 亲 卫 时 


图 20-15 应 用 样式 后 顶部 和 底部 的 运行 效果 
20.5 设计 左 侧 内 容 显示 模块 


左 侧 内 容 显示 模块 是 由 login_body 容器 定义 的 ， 它 占用 了 页 面 中 的 大 量 展示 区 域 ， 也 包含 
了 微 博 中 最 需要 表现 的 内 容 。 
开始 具体 布局 与 CSS 设计 之 前 ， 先 删除 在 页 面 结构 中 定义 的 多 余 文 本 。 
切换 至 default.css 文件 中 ， 为 login_body 容器 设置 CSS 样式 ， 代 码 如 下 所 示 : 
#1ogin body { 
overflow:hidden; 
clear:both; 
position:relative; 
background:#fff url (images/public/mainbg.gif) repeat-y left top; 
height:820px; 
} 
在 这 里 定义 了 一 个 高 度 ， 当 内 容 超出 这 个 高 度 值 时 则 不 显示 ， 并 且 清 除 两 边 的 浮动 ， 定 位 
方式 为 相对 定位 。 同 时 还 从 images/public/mainbg.gif 中 定义 了 一 个 垂直 重复 的 背景 图 片 。 
然后 通过 login_ 1 容器 来 定义 整个 左 侧 的 样式 ， 包 括 宽度 、 浮 劫 方式、 是 否 填充 和 背景 图 
片 等 。 如 下 所 示 : 


<<GOmmmm 


#1login body #login 1 { 
width:683px; 
overflow:hidden; 
background:url (images/public/ml.jpg) no-repeat top; 
float:left; 
padding-left:3px; 


20.5.1 宣传 广告 


微 博 的 宣传 广告 紧 接着 站 点 Logo 的 下 方 ， 也 是 一 个 黄金 位 置 。 在 这 里 通过 一 幅 图 片 来 吸 


引信 的 注意 力 。 
这 需要 用 tit 容器 的 样式 来 完成 ， 这 部 分 代码 如 下 所 示 : 


#1login 1 #tit { 
background:url (images/public/tit.jpg) no-repeat; 
width:682px; 
height:164px; 
float:right; 
margin-top:13px; 
position:relative; 


} 


可 以 看 到 ， 定 义 的 宽度 和 高 度 与 背景 图 片 的 宽度 和 高 度 一 致 。 采 用 相对 定位 ， 向 右 进行 浮 


动 ， 顶 部 有 13 像素 的 间距 。 如 图 20-16 所 示 是 应 用 样式 后 的 运行 效果 。 


图 20-16 运行 效果 


20.5.2” 热 议 话题 


热 议 话题 这 个 栏目 紧 贴 宣传 广告 栏目 下 方 ， 是 一 个 又 长 又 窗 的 条 幅 。 在 这 里 显示 了 当前 微 


博 系统 中 用 户 议论 最 多 的 话题 ， 每 个 话题 都 带 有 超 链接 ， 可 以 通过 单 
内 容 。 


me >> 


后 来 查看 该 话题 的 详细 
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如 图 20-17 所 示 为 这 个 模块 的 结构 。 通 过 #talking 可 以 定义 这 个 区 域 的 高 度 ， 并 清除 右 侧 
的 浮动 ， 超 出 的 内 容 隐藏 不 显示 ， 代 码 如 下 所 示 : 
#talking { 


height:36px; 
clear:right; 


overflow:hidden; 
} 
strong .coverl #topicBoxCon .COVerr 


#talking 
图 20-17 “ 热 议 话题 ”模块 结构 
在 talking 中 添加 一 个 strong 元 素 并 定义 文字 “正在 热 议 ”。 
<div id="talking"> 


<strong class=" "> 正在 热 议 : </strong> 
</div> 


接 下 来 为 strong 元 素 定义 样式 ， 代 码 如 下 所 示 : 


#talking strong { 
line-height:36px; 
height:36px; 
color:#cfc; 
padding:0 10px 0 45px; 
float:left; 


运行 后 ，strong 元 素 将 向 左 浮动 ， 显 示 在 模块 的 最 左 侧 ， 同 时 定义 字体 高 度 、 行 高 、 字 体 
颜色 和 填充 距离 。 
在 strong 元 素 之 后 插入 两 个 div， 分 别 定义 class 为 coverl 和 coverr， 代 码 如 下 所 示 : 


<div class="coverl"></div> 
<div class="coverr"></div> 


从 图 20-17 所 示 的 结构 中 可 以 看 到 ，coverl 和 coverr 是 位 于 话题 列表 上 的 两 个 浮动 块 。 它 
们 实际 就 是 利用 两 个 半 透 明 的 PNG 图 片 固定 到 那个 位 置 ， 并 通过 其 他 CSS 样式 设置 ， 达 到 淡 
入 淡出 的 效果 。 

如 下 所 示 为 所 需 的 CSS 样式 : 


#talking .coverl { 
pointer-events:none; 


_display:none; 
height:36px; 


< 环 人 mm 
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width:50px; 


background:url (images/public/coverl.png) no-repeat 7px 0; 


z-index:10; 
left:110px; 
position:absolute; 


} 


#talking .coverr { 


pointer-events:none; 


_display:none; 
height:36px; 
width:50px; 


background:url (images/public/coverr.png) no-repeat -1l7px 0; 


z-index:10; 
left:636px; 
position:absolute; 


} 


前 面 的 步骤 为 话题 添加 了 一 个 标题 以 及 两 个 遮 罩 块 。 现在， 开始 制作 真正 有 关 话 题 列表 的 


布局 。 这 部 分 代码 如 下 所 示 : 


<div class="acticle" id="topicBoxCon"> 
<ul class="acticle list" id="acticle list"> 


Ta 
<li><a 
a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 


这 里 使 用 一 个 列表 ， 再 定义 一 个 元 素来 表现 一 个 话题 。 在 ul 列表 中 只 需要 关注 话题 


href="#"> 下 雪 </a></1i> 
href="#"> 张 宁海 </a></1i> 
href="#"> 京 东 当 当 封 杀 门 </a></1i> 
href="#"> 好 冷 </a></1i> 
href="#">NBA</a></1i> 
href="#"> 微 访谈 王 烛 全 </a></1i> 
href="#">《 让 子弹 飞 》 公 映 </a></1i> 
href="#"> 包 身 工 </a></1i> 


内 容 ， 具 体 如 何 显示 由 外 围 的 div 来 控制 。 
如 下 所 示 是 控制 位 置 的 CSS 样式 : 


#talking -acticle { 
overflow:hidden; 
width:549px; 
float:left; 
height:36px; 


1 


“acticle list { 
overflow:hidden; 
height:36px; 
width:1200px; 
white-space:nowrap; 
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接 下 来 的 这 一 步 则 是 定义 的 位 置 ， 内 部 包含 链接 的 颜色 和 鼠标 移 至 上 方 时 的 颜色 ,代码 
如 下 所 示 : 


acticle ist 1 € 
float:left; 
margin-right:8px; 
line-height:36px; 

} 

#4talking .acticle List li a 
Color:#EAFFEA; 

j 

#talking .acticle list li a:hover { 
Color:#EAFFEA; 


如 图 20-18 所 示 为 本 节 添 加 布局 和 CSS 样式 后 ， 该 栏目 的 运行 效果 。 


ls x 


图 20-18 “ 热 议 话题 ”栏目 效果 


20.5.3 会员 列表 和 最 新 话题 


会 员 列表 和 最 新 话题 这 两 个 模块 是 微 博 首页 中 占用 面积 最 大 的 栏目 , 也 是 浏览 者 最 感 兴趣 
的 栏目 。 
在 会 员 列 表 模 块 中 展现 了 由 系统 推荐 的 名 人 会 员 ， 以 及 随机 产生 的 您 可 能 感 兴趣 的 会 员 ， 
每 位 会 员 都 显示 了 其 头像 与 名 称 。 最 新 话题 模块 则 显示 了 系统 所 有 会 员 当前 发 表 的 最 新 话题 ， 
每 个 话题 都 包含 发 表 人 头像 、 昵 称 、 话 题 内 容 和 发 表 时 间 。 
根据 开始 的 页 面 结构 分 析 , 我 们 知道 这 两 个 模块 应 该 放 在 #talking_list 容器 内 。 然 后 再 划分 
出 会 员 列表 和 最 新 话题 模块 ， 该 模块 的 最 终结 构 如 图 20-19 所 示 。 
在 index.html 中 删除 #talking_list 内 多 余 的 文本 ， 然 后 根据 图 20-19 所 示 来 定义 这 个 模块 的 
HIML 布局 。 代 码 如 下 所 示 : 
<div id="talking list"> 
<div class="tList mdul"> 
<!-- 此 处 为 会 员 列表 --> 
</div> 
<div class="tList mdu2"> 


<!-- 此 处 为 最 新 话题 --> 


</div> 


< 人 Ho 
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<div class="clearit"></div> 
</div> 


上 述 代码 中 最 后 一 个 div 元 素 clearit 用 于 清除 上 面 两 个 模块 产生 的 浮动 元 素 问 题 。 


tList_mdul tList mdu2 
twit_list 


.manlist 


.manlist 


#talking list 


20-19 alking_list 模块 结构 


接 下 来 ， 开 始 为 上 述 添加 的 HTML 布局 结构 定义 CSS 样式 。 第 一 个 是 这 里 的 主 容器 
#talking_list， 它 的 样式 如 下 : 


#talking list { 
clear:both; 
padding-bottom:15px; 
padding-top:15px; 

} 


然后 是 内 部 包含 的 两 个 并 列 元 素 .tList_mdul 和 .tList mdu2， 它 们 所 需 的 CSS 样式 如 下 
所 示 : 


-tList mdul { 
width:224px; 
border-right:lpx solid #EBEBEB; 
padding:0 0 0 24px; 
overflow:hidden; 
float:left; 

} 

-tList mdu2 { 
height:570px; 
width:420px; 
overflow:hidden; 
position:relative; 
float:efts; 

| 


至 此 ， 这 两 个 栏目 的 框架 就 搭建 好 了 。 下 面 则 需要 向 各 自 的 容器 中 填充 内 容 ， 再 细 化 ; 
内 容 的 表现 方式 。 


尝 
| 芭 
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按照 从 上 至 下 ， 从 左 至 右 的 顺序 。 首 先 制作 会 员 列 表 中 正在 使 用 微 博 会 员 的 列表 ， 这 部 分 
的 HTML 布局 如 下 所 示 : 


<dl class="manlist"> 
<qdt> 这 些 人 正在 用 微 博 </adt> 
<dd> 
<ul class="userlist"> 
<li><a href="#" ><img src="style/images/user/1283136409.jpg" 
/></a><a href="#"” > 祝 红 涛 </a></1i> 
<li><a href="#" ><img src="style/images/user/1284457797.jpg" 
/></a><a href="#" > 侯 艳 书 </a></1i> 
<li><a href="#" ><img src="style/images/user/1290884345.jpg" 
/></a><a href="#"”> 贺 强 </a></1i> 
<li><a href="#" ><img src="style/images/user/1283203478.jpg" 
/></a><a href="#" > 陈 锦 伟 </a></1i> 
<li><a href="#" ><img src="style/images/user/1291184181.jpg" /></a><a 
href="#" ”> 张振华 </a></1i> 
<li><a href="#" ><img src="style/images/user/1291278034.jpg" 
/></a><a href="#" > 王 川 川 </a></1i> 
<li><a href="#" ><img src="style/images/user/1256134612.jpg" 
/></a><a href="#" > 小 喇叭 </a></1i> 
<li><a href="#" ><img src="style/images/user/1291869868.jpg" 
/></a><a href="#" > 朱 凯 </a></1i> 
<li><a href="#" ><img src="style/images/user/1283203880.jpg" 
/></a><a href="#" > 平安 北京 </a></1i> 
</ul> 
</dd> 
</dl> 


上 述 代码 应 该 放 在 .tList_mdul 容器 内 。 不 过 需要 注意 的 是 , 这 里 的 层次 结构 与 前 面 介绍 过 
的 有 些 不 同 。.manlist 容器 表示 是 一 个 会 员 列表 ， 在 dt 元 素 中 定义 了 该 列表 的 标题 ， 例 如 这 里 
的 “这 些 人 正在 用 微 博 ”。 
然后 下 面 的 .userlist 容器 是 真正 的 会 员 列表 区 域 ， 其 中 每 个 1i 元 素 中 有 一 个 会 员 头像 链接 
和 会 员 昵 称 链接 。 
按照 惯例 从 外 至 内 依次 定义 CSS 样式 。 整 个 会 员 列 表 .manlist 容器 的 样式 如 下 : 
-manlist { 
width:224px; 
overflow:hidden; 
float:left; 
display:inline; 
margin-bottom:15px; 


1 

如 上 述 代码 所 示 ， 这 个 会 员 列表 的 宽度 为 224 像素 ， 向 左 进行 浮动 实现 紧 贴 左边 排列 ， 
“display:inline” 样 式 规则 使 列表 内 显示 为 块 的 元 素 ， 变 为 行内 显示 ， 即 行内 内 联 模式 。 

现在 来 完善 该 模块 内 其 他 布局 的 CSS 样式 ， 包 括 dt 元 素 、li 元素 、img 元 素 和 超 链接 。 最 
终 代 码 如 下 所 示 : 


<@—— 
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-manlist dt { 
background:url (images/public/crown.png) no-repeat left 4px; 
font-weight:bold; 
line-height:22px; 
padding:0 0 8px 22px; 
border-bottom:1lpx solid #ebebeb; 
margin-right:24px; 

} 

-manlist .userlist li { 
float:left; 
text-align:center; 
padding:llpx 0 0 0; 
width:60px; 
margin-right:10px; 
overflow:hidden; 
text-align:center; 
height:70px; 

} 

.manlist .userlist li a { 
color:#6eafd57 
white-space:nowrap; 
display:block; 

} 

-manlist .userlist li img { 
display:block; 
margin:0 auto 4px; 
width:50px; 
height:50px; 

} 

至 此 ， 关 于 第 一 个 会 员 列表 的 布局 和 CSS 样式 就 都 制作 完成 了 。 第 二 个 会 员 列 表 紧 贴 第 
-个 显示 ， 同 样 使 用 的 是 .manlist 容器 ， 其 中 的 内 容 结构 与 CSS 样式 都 相同 ， 所 以 这 里 就 不 再 
EE 复 介绍 。 

结束 两 个 会 员 列 表 的 制作 ,现在 轮 到 最 新 话题 模块 了 。 该 模块 位 于 .tList_mdu2 容器 下 ， 具 
体 的 HTML 布局 结构 如 下 所 示 : 

<dl class="twit list"> 

<dt> 大 家 正在 说 </dt> 
<dd> 


<div class="bottomcover"></div> 
<div class="maincontent" id="txtBoxCon"> 
<!-- 在 此 处 添加 最 新 发 表 的 话题 列表 --> 
</div> 
</dd> 
</dl> 


可 以 看 到 代表 整个 话题 列表 的 是 .twit_list， 在 它 的 样式 中 需要 定义 列表 宽度 、 浮 动 方向 以 
及 是 否 有 间距 等 。 本 实例 中 使 用 的 代码 如 下 : 


[Bh 


mm) >> 
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-twit list { 
margin:0 0 0 27px; 
width:394px; 
overflow:hidden; 
float:left; 
display:inline; 


| 
我 们 还 看 到 dt 元 素 、dd 元 素 、.bottomcover 容器 和 .maincontent 容器 ， 这 4 个 块 的 CSS 样 


式 代 码 如 下 所 示 : 


tmltelist dee 
background:url (images/public/bubble.png) no-repeat left 4px; 
font-weight:bold; 
line-height:22px; 
padding:0 0 8px 22px; 
border-bottom:lpx solid #ebebeb; 
.twit list dd { 
overflow:hidden; 
} 
.twit list .maincontent { 
overflow:hidden; 
} 
.twit list .bottomcover { 
position:absolute; 
bottom:0; 
background:url (images/public/halftransp.png) no-repeat 0 -5px; 
height:35px; 
width:394px; 
_background:none; 
_filter:progid:DxXImageTransform.Microsoft.AlphaImageLoader (src='images/ 
public/halftransp.png', sizingMethod='crop'); 
pointer-events:none; 


} 
继续 添加 HTML 布局 ， 将 光标 定位 到 .maincontent 容器 内 ， 使 用 如 下 的 代码 来 定义 一 个 


话题 : 


<div class="itemt"> 
<div class="twit item MIB linedot2"> 
<div class="twit item pic"><a href="#" ><img 
src="style/images/user/1289743382.jpg" /></a></div> 
<div class="twit item content"> <a href="#" title=" 酸 酸 珊 "> 酸 酸 珊 </a>: 某 
人 ， 己 所 不 欲 勿 施 于 人 ， 这 个 道理 你 应 该 懂 的 喧 ! 下 次 请 考虑 一 下 别人 的 感受 。 
<div class="twit item time">12 月 15 日 23:58</div> 
</div> 
</div> 
</div> 


ES | 


mu 


1， 每 个 itemt 容器 表示 发 表 的 一 个 话题 ， 包 含 了 发 表 人 头像 、 昵 称 、 话 题 内 容 和 发 表 时 
复 添 加 这 个 itemt 容器 从 而 形成 多 个 话题 组 成 的 列表 。 

在 上 面 的 itemt 容器 内 共有 5 个 CSS 样式 需要 定义 ， 这 部 分 代码 如 下 所 示 : 

-twit list dd .twit item { 

overflow:hidden; 


间 。 


_zoom:1; 
font-size:12px; 
padding:10px 0; 

} 

stwit list dd .twit item pic { 
float:left; 
width:66px; 
padding-top:2px; 

} 

-twit list dd .twit item content { 
float:left; 
width:316px; 
Color:#666; 
line-height:18px; 

} 

-twit list dd .twit item content a { 
Color:#6EAFDS; 

} 

-twit list dd .twit item time { 
float:left; 
width:316px; 
color:#999; 
line-height:20px; 

} 


经 过 前 面 漫长 的 步骤 和 CSS 样式 的 逐步 完善 ， 最 终 完成 了 会 员 列表 和 最 新 话题 两 个 模块 
的 制作 。 现 在 在 浏览 器 中 运行 ， 会 看 到 如 图 20-20 所 示 的 效果 。 


和 


20-20 ”运行 效果 
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20.6 设计 右 侧 边栏 模块 


从 本 节 开 始 ， 我 们 将 来 完成 微 博 首页 中 的 最 后 一 个 模块 ， 即 位 于 页 面 右 侧 的 边栏 。 
与 上 一 节 介绍 的 模块 相 比 ， 这 个 边栏 虽然 比较 窗 ， 但 是 显示 的 内 容 也 非常 重要 ， 像 如 何 注 
册 一 个 微 博 、 登 录 到 微 博 系统 或 者 查看 最 流行 的 关注 排行 榜 等 。 
表示 整个 右 侧 边栏 的 是 才 ogin r 容器 ， 它 的 CSS 样式 定义 如 下 : 
#1login body #login r { 
width:267px; 
height:auto; 
overflow:hidden; 
background:url (images/public/mr.png) no-repeat top; 
float:left; 
padding-right:3px; 


上 


可 以 看 到 ， 仍 然 是 向 左 进行 浮动 ， 通 过 定义 宽度 、 背 景 图 片 和 右 填充 间距 来 控制 位 置 。 
如 下 所 示 是 它 包 含 的 两 个 子 容器 的 ogin_item 和 雪 ogin_info 的 样式 : 
#1ogin Fr #login item { 
height:318px; 
padding-top:30px; 
} 
#1login r #login info { 
background:#FFF; 
padding-top:20px; 
} 
其 中 圾 ogin_item 子 容器 中 包含 的 是 会 员 注 册 与 登录 入 口 , 检 ogin_info 子 容器 中 包含 的 是 一 
个 会 员 关 注 度 排行 榜 。 


20.6.1 会 员 注 册 与 登录 入 口 


微 博之 所 以 这 么 流行 , 很 大 程度 上 取决 于 它 对 会 员 之 间 的 交流 、 互 动 具 有 比较 强 的 优越 性 。 

因此 ， 如 果 我 希望 成 为 微 博 中 的 一 员 ， 就 必须 先进 行 注册 ， 然 后 便 可 以 通过 登录 微 博 与 其 
他 会 员 进行 沟通 。 

既然 会 员 注 册 这 么 重要 ， 需 要 把 它 放 在 一 个 比较 醒目 的 位 置 ， 以 方便 浏览 者 使 用 。 如 下 所 
示 为 本 实例 中 的 注册 HTML 布局 代码 : 


<div class="regtop"> <a href="#" class="regbtn"></a> 


<p> 注 册 就 有 机 会 获得 手机 充值 卡 ! </p> 


</div> 


代码 非常 简单 明了 。regtop 说 明 这 是 注册 表单 ，regbtn 表示 一 个 注册 按钮 ， 在 p 元 素 中 提 


< 
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供 了 一 个 简单 的 注册 描述 ， 更 加 容易 理解 。 
与 此 对 应 的 CSS 样式 就 没有 这 么 简单 了 ， 它 需要 精确 控制 注册 表单 的 宽度 、 对 齐 方 式 、 
内 容 四 周 的 间距 。 还 有 注册 按钮 所 采用 的 背景 图 片 、 鼠 标 移 到 上 面 时 的 状态 以 及 描述 文字 的 字 
体 颜色 等 。 
最 终 确定 的 CSS 样式 代码 如 下 所 示 : 
#login item -regtop { 
width:200px; 


text-align:center; 
margin:0 0 32px 30px; 


} 
#1login item .regtop P { 
padding-top:4px; 


color:#F00; 

} 

#1login item .regbtn { 
display:block; 


background:url (images/public/regbtn.png) no-repeat 0 0; 
width:196px; 
height:52px; 
} 
#1login item .regbtn:hover { 
background-position:0 -52px; 
} 


下 面 我 们 来 看 看 会 员 登 录 的 HTML 布局 设计 ， 这 些 代码 如 下 所 示 : 


<div class="loginform" id="login form"> 
<div class="input bg"> 
<input type="text" id="loginname"/> 
</div> 
<div class="input bg"> 
<input type="password" id="password"/> 
<input type="text" id="password text" style="display:none;"/> 
</div> 
<div class="setting"> <span class="]lf"> 
<input type="checkbox" class="labelbox" id="remusrname" checked /> 
<label> 下 次 自动 登录 </label> 
</span><a class="rt" href="#" target=" blank"> 找 回 密码 </a> </div> 
<div class="signin"><a href="#" class="sp" 
id="login submit btn"></a></div> 
</div> 


在 登录 时 需要 提供 一 个 账户 和 密码 、 登 录 按钮 ， 另 外 还 提供 了 下 次 自动 登录 和 找 
功能 。 

在 登录 表单 的 HTML 布局 设计 代码 中 ， 需 要 涉及 的 样式 比较 多 ， 像 账户 输入 文本 框 、 密 
码 输入 文本 框 、 自 动 登录 复 选 框 、 找 回 密码 链接 、 登 录 按 钮 以 及 整体 背景 的 控制 等 。 

所 以 ， 这 里 就 不 再 逐个 介绍 ， 其 中 重要 的 CSS 样式 如 下 所 示 : 


TH 


密码 


mm > 
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#1login item .loginform { 
width:194px; 
margin:0 0 0 30px; 

} 

#1login item .input bg { 
background:url (images/public/inputbg.png) no-repeat; 
width:194px; 
height:31px; 
margin-bottom:10px; 

} 

#1login item .input bg input { 
border:none; 
margin:2px 0 0 4px; 
height:20px; 
line-height:20px; 
width:184px; 
color:#ababab; 

} 

#1login item .setting { 
color:#666; 
height:24px; 

} 

#1login item .setting a { 
color:#6eafd5; 

} 

#1login item .setting input { 
vertical-align:middle; 
_vertical-align:text-bottom; 
margin-right:4px; 
margin-right:0\9; 

} 

login item setting -rt + 
line-height:24px\9; 

上 

#1ogin item .signin { 
text-align:center; 
margin-top:16px; 

} 

#login item .signin a.sp { 
display:inline-block; 
width:97px; 
height:30px; 
background:url (images/public/signin.png) no-repeat 0 0; 

} 

#login item .signin a.sp:hover { 

background-position:0 -30px; 


} 
如 图 20-21 所 示 为 本 节 添 加 布局 和 CSS 样式 后 ， 会 员 注册 与 登录 入 口 的 运行 效果 。 


5 | 
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el 
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加 大 家 下 在 兹 


本 ATT; 天 理 尼 地， 但 是 心里 恨 黎 呢 ， 因 为 过 年 可 以 回 闻 ， 
原 采 六 也 有 那么 笠 二 的 时 候 
有 关 下 雪 7 ,还 T 好 大 ,可 亿 tat 起 


图 20-21 运行 效果 


20.6.2 会 员 关 注 排行 榜 


所 谓 会 员 关 注 排行 榜 ， 是 指 在 当前 微 博 中 的 所 有 会 员 ， 按 照 关注 度 (浏览 量 ) 从 高 到 低 顺 序 
排列 ， 列 出 前 10 位 的 会 员 信 息 。 
这 些 信息 应 该 添加 到 要 ogin_info 容器 内 。 根 据 前 面 介绍 的 会 员 列 表 和 话题 列表 的 经 验 ， 这 


目 


当前 排行 名 次 、 会 员 昵 称 和 关注 度 。 


最 终 确定 在 本 实例 中 的 代码 如 下 所 示 : 


<div class="ptless" id="login info"> 
<div class="leftline"> 
<dl> 
<dt class="hasline"></dt> 
<dd class="boardlist"> 
<ul class="tLoginTopl0List"> 

<li><em class="numl"><strong></strong></em><span><a 
</a></span><cite>4,334,860</cite></1i> 

<li><em class="num2"><strong></strong></em><span><a 
</a></span><cite>4,183,816</cite></1i> 

<1i><em class="num3"><strong></strong></em><span><a 
</a></span><cite>3,973,360</cite></1i> 

<li><em class="num4"><strong></strong></em><span><a 
</a></span><cite>3,734,721</cite></1i> 

<li><em class="num5"><strong></strong></em><span><a 
</a></span><cite>3,305,328</cite></1i> 

<1i><em class="num6"><strong></strong></em><span><a 
</a></span><cite>3,201,802</cite></1i> 

<li><em class="num7"><strong></strong></em><span><a 
</a></span><cite>3,099,529</cite></1i> 


仍然 采用 dl 元 素 中 顽 套 ul 列表 的 形式 来 完成 ， 其 中 每 个 元 素 表示 一 个 会 员 信息 ， 显 示 了 


href="#" > 祝 红 涛 
href="#"> 侯 艳 书 
href="#"> 张 均 春 
href="#"” > 刘 晓 桐 
href="#"” > 谢 玲 

href="#"” > 贺 瑞 芳 


href="#"” > 李 玲 
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<li><em class="num8"><strong></strong></em><span><a href="#" > 黄 正 华 
</a></span><cite>3,097,717</cite></1i> 
<li><em class="num9"><strong></strong></em><span><a href="#"> 赵 从 林 
</a></span><cite>2,845, 960</cite></1i> 
<li><em class="num10"><strong></strong></em><span><a href="#"” > 陈 阳 
</a></span><cite>2, 828,813</cite></1i> 
</ul> 
</dd> 
</dl> 
</div> 
</div> 


在 移动 终端 和 上 网 设备 日 益 多 样 化 的 今天 ， 一 个 网 站 的 访问 方式 不 止 一 种 。 对 于 微 博 系 统 
来 说 , 也 是 如 此 。 因 此 , 这 里 我 们 在 排行 榜 的 下 方 , 添加 了 一 个 使 用 手机 上 微 博 的 地 址 , HTML 
代码 如 下 所 示 : 


<div class="dlblank"> 
<dl> 
<dt> 如 何 用 手机 上 微 博 </at> 
<dd> 
<p>WAP 版 微 博 地 址 : <cite>m.gougou.com</cite></p> 
<p class="more"><a href="#"> 更 多 方式 <em>&gt; &gt;</em></a></p> 
</dd> 
</dl> 
</div> 


上 述 HTML 代码 需要 添加 到 leftline 容器 内 ，“ 关 注 排行 榜 ” 模 块 dl 元 素 之 外 。 用 到 的 
CSS 修饰 样式 如 下 所 示 : 


.dlblank { 
padding:25px 0 0 25px; 
_padding:25px 0 0 32px; 
clear:both; 
height:120px; 


© 


} 
-dlblank dt { 
background:url (images/public/phone.png) no-repeat left lpx; 
_line-height:19px; 
padding-left:22px; 
} 
-dlblank dd { 
padding-left:21px; 
line-height:21px; 
| 


至 此 ,整个 微 博 中 重要 模块 的 设计 以 及 CSS 的 制作 就 完成 了 。 如 图 20-22 所 示 为 本 节 添 加 
布局 和 CSS 样式 后 ， 会 员 关 注 排行 榜 的 运行 效果 。 


< 
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己 匠 不 起 所 话 于 人 ， 这 个 道 得 你 该 便 拉 
别人 印 原 受 - 
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02: 下 二 第 一 天 耳 廊 上 示 了 个 六 并 


温 小 要 :Ml: 优 们 向 萎 入 可 好 列 ， 乔 们 从 来 都 和 由 架 ， 只 打架 
恒 s 各 向 用 手机 上 牢 博 


WAP 版 袜 博 寺 站 ; m.gougou.com 
页 方式 => 


图 20-22 运行 效果 
20.7 总 结 


基于 Web 标准 的 网 站 设计 的 核心 在 于 如 何 使 用 众多 Web 标准 中 的 各 项 技术 来 实现 表现 与 
内 容 的 分 离 ， 即 网 站 的 结构 、 表 现 、 行 为 三 者 分 离 。 只 有 真正 实现 了 三 者 分 离 的 网 页 设计 ， 才 
是 真正 符合 Web 标准 的 网 页 设计 。W3C(Web 标准 的 制订 组 织 ) 建 议 网 页 设计 者 使 用 XHTML 
以 更 严谨 的 语言 编写 结构 ， 并 使 用 CSS 来 完成 网 页 的 布局 表现 ， 因 此 掌握 基于 CSS 的 网 页 布 
局 方式 ， 是 实现 Web 标准 的 必 备 基础 。 

本 章 通 过 微 博 这 个 目前 非常 流行 的 主题 展开 讲解 。 首 先 ， 阐 述 了 什么 是 微 博 ， 并 给 出 一 个 
微 博 的 最 终 运行 效果 。 然 后 对 其 进行 结构 分 析 ， 并 逐步 按照 从 上 到 下 、 从 左 至 右 的 顺序 依次 来 
实现 。 

在 本 章 介绍 的 过 程 中 ， 遵 循 Web 开发 的 习惯 。 先 设计 HTML 代码 ， 再 定义 CSS 样式 ， 而 
且 在 各 模块 的 分 析 时 尽 可 能 用 最 少 的 CSS 代码 来 解释 。 因 此 ， 并 没有 介绍 所 有 CSS 代码 ， 有 
兴趣 的 读者 可 以 查看 提供 实例 的 完整 源 代 码 。 


1. 填空 题 


(1) Cascading Style Sheet 
(2) 蓝 
(27 
(4) 绿 


2. 选择 题 


(DD 
(DA 
(3)B 
(WD 
(5)B 


1. 填空 题 


(DD™ 

(2) table {color:red} 
(3)id 

(4) 类 选择 符 

(5) 群 组 选择 符 

2. 选择 题 


(GD BCD 
(DA 
GB)B 
(WD 
(5)A 
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1. 填空 题 

(1) a:hover 

(2) li:first-child {color:red:} 

(3) li:first-letter { color:red; font-size:18px:} 
(4) :lang 

2. 选择 题 


(DA 
DB 
G)A 
(DA 
(5)B 


1. 填空 题 


(1) oblique 

(2) letter-spacing 
(3) Font 

2. 选择 题 


(DD 
QC 
(3)B 


1. 填空 题 

(1) text-align 

OD 

(3) vertical-ideographic 
(4) text-decoration 


(5) uppercase 


(6) 内 容 将 在 边界 内 换行 
2. 选择 题 

(WD 

(WC 

(3)B 

(DC 


1. 填空 题 


(1) 样式 
(2) Border 
(G3) 最 大 


2. 选择 题 
(YC 
(2)A 
(3)C 
(WB 


1. 填空 题 


(1) padding-bottom 
(2) 上 下 左右 边 距 
(3) 100px 

2. 选择 题 

(DA 

2A 

G)A 

(4) ABCD 

(5)B 
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1. 填空 题 


(D16 

(2) RGB 

(3) background-color 
(4) background-image 
(5) no-repeat 

(6) background-image 
(7) 居中 


2. 选择 题 


(DC 
C)D 
(3)A 
(DA 


1. 填空 题 

(1) list-style-type 
(2) 实心 圆 点 项 目 符号 
(3) outside 

(4) list-style-image 
2. 选择 题 

(WC 

(DA 

(3)B 

(WD 

(5) B 

(6) C 


第 10 章 


1. 填空 题 


(1) scrollbar-face-color 
(2) scrollbar-track-color 


(3) scrollbar-arrow-color 
2. 选择 题 

(DC 

(2) C 

(3)B 


第 11 章 


1. 填空 题 


(1) absolute 
(2) bottom 
(3) clip 

(4) block 

2. 选择 题 
(DB 

(2) A 

(3)D 

(DA 


第 12 章 


1. 填空 题 

(1) collapse 

(2) 显示 

(3) 单元 格 水 平 间距 与 垂直 间距 均 为 10px 
2. 选择 题 

(DB 


C537 


人 SS wos 


C) B 
G3)D 
(WDC 


1. 填空 题 
(1)display 
(2)fieldset 
(3)accesskey 
(4)background-color 
($5) <style type=text/css> 
input:focus{ 
border-color:blue; 
background-colorblue: 
color:white: 
} 
</style> 
2. 选择 题 
(DD 
(2)A 
(3) C 
(4)B 


1. 填空 题 

(1) Alpha 

(2) 边缘 光 坚 
(3) Light 

(4) RevealTrans 
2. 选择 题 
(DC 

(DA 

G3)A 

(WC 
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第 14 章 


第 15 章 


1. 填空 题 

(1) 代码 检查 器 
(2) 缩 进 代码 
(3) JavaScript 
(4) JavaScript 
2. 选择 题 

(1) C 

(2)B 

(3) D 


第 16 章 


1. 填空 题 

(1) 序言 

(2) 属性 

(3) 元 素 

(4) <HTML:STYLE> 

(5) “标记 名 称 ”+“#”+“ID 属性 值 ” 


(6) <?xml-stylesheet hre 伟 "xsl 样式 表 的 URL" type="text/xs1"?> 


2. 选择 题 
(DA 
DB 
G)A 
(DA 
G)D 


第 17 章 


1. 填空 题 
(D 布尔 值 
G@) | 
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(3) undefined 


2. 选择 题 
() D 
C) B 
(3)A 
(4) B 


1. 填空 题 


(1) lte 

(2) 行内 块 、 绝 对 定位 块 
(3) overflow、 宽 度 

(4) 过 渡 版 本 


2. 选择 题 


(WD 
(2) C 
(3)B 
(DA 
G)D 
(OA 
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